首页 > 后端开发 > php教程 > vue数据绑定方式详解

vue数据绑定方式详解

jacklove
发布: 2023-03-31 17:04:01
原创
2141 人浏览过

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

parent.vue

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        }
    }
</script>
登录后复制

children.vue

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击改变children的msg</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>
登录后复制

页面如下:


点击后:


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

第一种:v-model传递

父组件修改:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children v-model="msg"></children>
    </p>
</template>
登录后复制

子组件修改:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;input&#39;, "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 &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        },
        methods: {
            changeMsg() {
                this.msg = "收到子组件信号,嘤嘤嘤"
            }
        }
    }
</script>
登录后复制

子组件修改:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "给你一个value")
                this.msg = &#39;from children&#39;
            }
        }
    }
</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 &#39;@/components/children&#39;
    import children2 from &#39;@/components/children2&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;,
                msg2: &#39;from parent&#39;
            }
        },
        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=&#39;changeChild&#39;>点击呼叫children2</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "children2,children2,收到请回答,收到请回答")
            }
        }
    }
</script>
登录后复制

子组件二:

<template>
    <p>
       <p>children2: {{ msg2 }}</p>
    </p>
</template>
<script>
    export default {
        name: &#39;children2&#39;,
        data () {
            return {

            }
        },
        props: [&#39;msg2&#39;]
    }
</script>
登录后复制

页面如下:                                                    点击后:


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

相关推荐:

简易 PHP+MySQL 分页类

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

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

以上是vue数据绑定方式详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
vue
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板