vue 父子组件的一些问题

最新推荐文章于 2024-09-13 17:21:46 发布

阿豪boy

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量55

点赞数

文章标签： vue react js html cakephp

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066917

版权

原文链接: vue 父子组件的一些问题

上一篇: vue 组件的缓存

下一篇: js promise

属性传递，vue中数据传递是单向的，事件是双向的

在子组件中修改父组件的传入的值会报错，使用事件传递，由子组件发送事件，父组件接受事件后在父组件中修改属性值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <!-- 修改父组件传入的值时，子组件会自动更新属性，重新渲染 -->
        <!-- 但是，更改子组件的属性时，无法修改父组件的值，防止子组件无意间更改父组件的状态 -->
        <!-- 数据流是单向的，但控制流可以是逆向的 -->
        <div>
            a:{{a}}
            <button type="button" @click='a = 111'>修改</button>
        </div>
        <my-component :a='a'></my-component>

    </div>
</body>
<script type="text/javascript">
    // 单项数据流
    var myComponent = Vue.extend({
        template: '<div>a:{{a}} <button @click="a=222">修改</button></div>',
        props: {
            a: ''
        },
    })

    new Vue({
        el: '#app',
        data: {
            a: 1
        },
        components: {
            // 将myComponent组件注册到Vue实例下
            'my-component': myComponent
        }
    });
</script>

</html>

组件异步渲染的dom处理

操作dom时最好使用nextTick方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <son ref='son'></son>
    </div>
</body>
<script type="text/javascript">
    let son = {
        template: '<div><p v-for="i in arr">{{i}}</p></div>',
        data() {
            return {
                arr: [1, 2, 3]
            }
        },
        mounted() {
            this.arr = [4, 5, 6]
            console.log('son mounted arr', this.arr)
        }
    }
    new Vue({
        el: "#app",

        components: {
            son
        },
        mounted() {
            console.log('fa mounted', this.arr);
            // 由于异步渲染，所以拿到的dom是没有修改之前的
            console.log(this.$refs.son.$el.innerHTML) // 1 2 3


            // 操作dom 时最好添加nextTick 防止异步渲染时出现的bug
            this.$nextTick(() => {
                console.log(this.$refs.son.$el.innerHTML) //4,5,6

            })
        },

    })
</script>

</html>