Vue父子组件之间的相互通信
组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作。它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值是通过自定义事件。
1.父组件向子组件传值
1 <div id="app"> 2 <parent></parent> 3 </div> 4 5 <template id="parent"> 6 <div> 7 <div style="border:1px solid red;width: 300px;"> 8 <h1>父组件</h1> 9 <p>{{parentMsg}}</p> 10 </div> 11 <child :get-parent="parentMsg"></child> 12 </div> 13 </template> 14 15 <template id="child"> 16 <div> 17 <h1>子组件</h1> 18 <p>{{childMsg}}</p> 19 <button @click="printParentMsg()">父组件信息</button> 20 </div> 21 </template> 22 23 <script> 24 25 var child={ 26 data(){ 27 return { 28 childMsg:"我是子组件数据" 29 } 30 }, 31 template:"#child", 32 props: ['getParent'], 33 methods: { 34 printParentMsg(){ 35 alert('父组件信息:' + this.getParent); 36 } 37 } 38 }; 39 40 var parent={ 41 42 data(){ 43 return { 44 parentMsg:"我是父组件的数据" 45 } 46 }, 47 48 components:{ 49 'child':child 50 }, 51 52 template: '#parent' 53 } 54 55 new Vue({ 56 el:"#app", 57 components:{ 58 'parent':parent 59 } 60 }); 61 62 </script>
具体方法:
1.子组件在props中创建一个属性,用来接收父组件传来的值
2.父组件中注册子组件
3.在父组件模板中的子组件标签添加对应于子组件props中的属性
4.把需要传递的值赋给上一步子组件标签创建的属性(这里要注意的是props中的属性用驼峰命名法,标签中的属性用横杠命名法)
2.子组件向父组件传值
1 <div id="app"> 2 <parent></parent> 3 </div> 4 5 <template id="parent"> 6 <div> 7 <div style="border:1px solid red;width: 300px;"> 8 <h1>父组件</h1> 9 <p>{{parentMsg}}</p> 10 </div> 11 <child v-on:receive-msg="handleMsg"></child> 12 </div> 13 </template> 14 15 <template id="child"> 16 <div> 17 <h1>子组件</h1> 18 <p>{{childMsg}}</p> 19 <button @click="sendToParent">传递信息</button> 20 </div> 21 </template> 22 23 <script> 24 25 var child={ 26 data(){ 27 return { 28 childMsg:"我是子组件数据" 29 } 30 }, 31 template:"#child", 32 props: ['getParent'], 33 methods: { 34 sendToParent(){ 35 console.log('sendToparent') 36 this.$emit("receive-msg", "已经收到子组件传来的消息"); 37 } 38 } 39 }; 40 41 var parent={ 42 43 data(){ 44 return { 45 parentMsg:"我是父组件的数据" 46 } 47 }, 48 49 components:{ 50 'child':child 51 }, 52 53 template: '#parent', 54 55 methods: { 56 handleMsg: function(msg){ 57 console.log('handleMsg') 58 alert(msg); 59 } 60 } 61 } 62 63 new Vue({ 64 el:"#app", 65 components:{ 66 'parent':parent 67 } 68 }); 69 70 </script>
具体方法:
1.子组件在某种条件下触发一个自定义事件
2.该自定义事件需要挂载在父组件的子组件标签上,让父组件可以监听到这个自定义事件
3.将需要传的值放在$emit方法的第二个参数上,该值将作为实参传递给响应自定义事件的方法
(注意!这里有个小坑:自定义事件貌似不支持驼峰命名法,改用横杠命名即可,否则会接收不到值)