vue数据绑定方式详解

众所周知，vue是单向数据流，子组件不能直接改变父组件中的变量，如下：

parent.vue

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children :msg="msg"></children>
    </p>
</template>
<script>
    import children from '@/components/children'
    export default {
        name: 'parent',
        data() {
            return {
                msg: 'from parent'
            }
        },
        components: {
            children
        }
    }
</script>

children.vue

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click='changeChild'>点击改变children的msg</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: 'children',
        data () {
            return {
          
            }
        },
        props: ['msg'],
        methods: {
            changeChild() {
                this.msg = 'from children'
            }
        }
    }
</script>

页面如下：

点击后：

上面是最基础的父向子组件传递数据，子组件修改变量不影响父组件，那么父子组件如果要同步呢？这时应该使用this.$emit()这个函数了。

第一种：v-model传递

父组件修改：

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children v-model="msg"></children>
    </p>
</template>

子组件修改：

<script>
    export default {
        name: 'children',
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: ['msg'],
        methods: {
            changeChild() {
                this.$emit('input', "child")
            }
        }
    }
</script>

注意：model部分不能省略，this.$emit（）触发的事件为input（当父组件上没有明确绑定返回事件时，input为默认），传递的值为child

页面如下：

点击后：

可见父子组件的值同步了

第二种：明确指定响应事件（@）

父组件修改：

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children @upChange="changeMsg" :msg="msg"></children>
    </p>
</template>
<script>
    import children from '@/components/children'
    export default {
        name: 'parent',
        data() {
            return {
                msg: 'from parent'
            }
        },
        components: {
            children
        },
        methods: {
            changeMsg() {
                this.msg = "收到子组件信号，嘤嘤嘤"
            }
        }
    }
</script>

子组件修改：

<script>
    export default {
        name: 'children',
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: ['msg'],
        methods: {
            changeChild() {
                this.$emit('upChange', "给你一个value")
                this.msg = 'from children'
            }
        }
    }
</script>

这里我故意在emit之后修改了msg的值，事实证明，这是不行的，所以我猜测emit是一个异步函数，会在队列的最后执行，也就是说这里赋值‘from children’最后被覆盖了。

值得一提的是，this.$emit（）第二个参数可向父组件传值，这里用处很大，自行体会

页面如下：

点击后：

两种方法都基本可以达到预期效果，具体自己分情况使用

说完父子通信后，理所当然到子子组件通信了，其实，机智的你应该也想到怎么做了吧。没错，就是利用父组件当跳板，让子子组件达到通信的效果。

下面还是给个小例子：

父组件：

<template>
    <p>
        <children @upChange="changeMsg" :msg="msg"></children>
        <children2 :msg2="msg2"></children2>
    </p>
</template>
<script>
    import children from '@/components/children'
    import children2 from '@/components/children2'
    export default {
        name: 'parent',
        data() {
            return {
                msg: 'from parent',
                msg2: 'from parent'
            }
        },
        components: {
            children,
            children2
        },
        methods: {
            changeMsg(value) {
                this.msg = value
                this.changeChild2()
            },
            changeChild2() {
                this.msg2 = "children2收到 children2收到  over over！"
            }
        }
    }
</script>

子组件一：

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click='changeChild'>点击呼叫children2</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: 'children',
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: ['msg'],
        methods: {
            changeChild() {
                this.$emit('upChange', "children2，children2，收到请回答，收到请回答")
            }
        }
    }
</script>

子组件二：

<template>
    <p>
       <p>children2: {{ msg2 }}</p>
    </p>
</template>
<script>
    export default {
        name: 'children2',
        data () {
            return {

            }
        },
        props: ['msg2']
    }
</script>

页面如下： 点击后：

本文介绍了vue数据绑定方式详解 ，更多相关内容请关注php中文网。

相关推荐：

简易 PHP+MySQL 分页类

两个不用递归的树形数组构造函数

HTML转Excel，并实现打印，下载功能

以上就是vue数据绑定方式详解的详细内容，更多请关注php中文网其它相关文章！