众所周知,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中文网。
相关推荐:
以上就是vue数据绑定方式详解的详细内容,更多请关注php中文网其它相关文章!
已抢185576个
抢已抢66881个
抢已抢352160个
抢已抢665619个
抢已抢119984个
抢已抢20439个
抢