vue父子组件通信
父组件传递数据给子组件
父组件
<parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; }
子组件
Vue.component('child', { // 声明 props props: ['childMsg'], // 就像 data 一样,prop 也可以在模板中使用 // 同样也可以在 vm 实例中通过 this.childMsg 来使用 template: '<span>{{ childMsg }}</span>' })
子组件传递数据给父组件
子组件
<template> <div @click="tellParent"></div> </template> methods: { tellParent() { this.$emit('toParent', 'Hi, father!'); // 主动触发toParent方法,'Hi, father!'为向父组件传递的数据 } }
父组件
<parent> <child @toParent="change" :msg="msg"></child> // 监听子组件触发的toParent事件, 然后调用change方法 </parent> methods: { change(msg) { this.msg = msg; } }
父子组件数据双向绑定
父组件
<text-document v-bind:title.sync="doc.title"></text-document>
子组件
this.$emit('update:title', newValue)