vue.js的通信方式
1.props和$emit()通信方式(适用于父子组件之间传值)
//创建父组件 1. var vm = new Vue({ el: "#app", data() { return { msg: '父组件的值' } }, methods: { //事件调用，获取子组件传入的值value ChangeDate(value) { this.msg = value // } } }) //自定义一个组件作为子组件 Vue.component('ChildNode', { data() { return { msg: '这是子组件的值' } }, props: ['msg'], //通过props来接收父组件的值,props接收值的方式可是对象和数组 template: ` <div> <h3>btn组件</h3> <div> 父组件传值 <h5>这是父组建的值;{{msg}}</h5> <input type="text" v-model="msg" @input="changeMsg"> </div> </div>`, methods: { //input事件通过$emit()来触发在父组件中自定义的事件来传值 changeMsg() { this.$emit('change-data', this.msg) } }, }) <div id="app"> {{msg}} <h3>父子组件传值</h3> <!--:msg="msg"是传给子组件的值，v-on:change-data="ChangeDate"是子组件要触发的自定义事件--> <child-node :msg="msg" v-on:change-data="ChangeDate"></child-node> </div>
2.listeners（常用于对原生组件的封装,多层嵌套组件的传值方式)
<div id="app"> {{title}} <test1 ref="son"></test1> <test2 :status="status" :title="title" v-on:getdata="getdata"></test2> </div>//组件3 Vue.component('Test3', { data() { return { datas: '嵌套子组件3' } }, template: `<div> <h3>{{datas}}</h3> <button @click="changeData">改变title的值</button> </div>`, created() { console.log('-----Test3------') console.log(this.$attrs.title) //{status: false} console.log(this.$listeners()) // {getData: ƒ} }, methods: { changeData() { this.$attrs.title = 'test3改变了父组件的值' this.$emit('getdata', this.$attrs.title) } }, }) //自定义组价 Vue.component('Test2', { data() { return { datas: '我是test2组件' } }, props: ['status'], template: `<div> <h1>我是Test2</h1> <div>嵌套子组件</div> <test3 v-bind="$attrs" v-on="$listeners"></test3> </div>`, created() { }, methods: { getTest() { console.log(this.datas) } }, }) //根组件 var vm = new Vue({ el: '#app', data() { return { msg: '$refs传值', title: '这个根组件的值', status: false } }, mounted() { console.log(this.$children) }, methods: { getdata(val) { this.title = val } } }) </script>
3.事件总线的方式（使用任意组价的传值）
<div id="app"> {{msg}} <hr> <test1></test1> <hr> <test2></test2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script> /** * 组件1向组件3传值,使用事件总线 * */ //创建一个事件总线 const Bus = new Vue(); //组件1 Vue.component('Test1', { data() { return { msg: '这个test1组件的值', } }, template: ` <div> {{msg}} <button @click="changeValue">改变数据</button> </div>`, created() { console.log(`${this.titleFather}-----------SonTwo`) }, mounted() { this.isShow = true this.$nextTick(() => { this.$refs.input.focus() }) }, methods: { //通过Bus.$emit()来触发getTitle事件，并传入值 changeValue() { Bus.$emit('getTitle', this.msg) } }, }) //组件2 Vue.component('Test2', { data() { return { person: { name: 'tom', age: 18 } } }, template: `<div> <h4>名字:{{person.name}}</h4> <h4>年龄：{{person.age}}</h4> <h5>嵌套一个子组件</h5> <test3></test3> </div>`, }) //组件3 Vue.component('Test3', { data() { return { datas: '这是组件3的值', title:"" } }, template: `<div>{{datas}}<h5>test1传递过来的值：{{title}}</h5></div>`, mounted() { //Bus.$on来监听getTitle，事件的触发，并接受传入的值 Bus.$on('getTitle', (item) => { this.title = item }) }, }) var vm = new Vue({ el: '#app', data() { return { msg: '这是根组件的值' } }, }) </script>
4.provide / inject （祖先及其后代传值）
<div id="app"> {{msg}} <hr> <test1></test1> <hr> <test2></test2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script> /** * provide和inject的传值方式 * */ Vue.component('Test1', { data() { return { msg: '这个test1组件的值', isShow: false } }, //接收传递过来的值 inject: ['titleFather'], template: ` <div> {{msg}} <button @click="changeValue">改变数据</button> </div>`, created() { console.log(`${this.titleFather}-----------SonTwo`) }, methods: { }, }) Vue.component('Test2', { data() { return { person: { name: 'tom', age: 18 } } }, //接收父组件的传递的值 inject: ['titleFather'], template: `<div> <h4>名字:{{person.name}}</h4> <h4>年龄：{{person.age}}</h4> <h5>嵌套一个子组件</h5> <test3></test3> </div>`, created() { console.log(this.titleFather) }, }) Vue.component('Test3', { data() { return { datas: '这是组件3的值', title: '' } }, //接收父组件的值 inject: ['titleFather'], template: `<div>{{datas}}<h5>test1传递过来的值：{{titleFather}}</h5></div>`, mounted() { console.log(this.titleFather) }, }) var vm = new Vue({ el: '#app', data() { return { msg: '这是根组件的值' } }, //定义要传递的值 provide() { return { titleFather: '父组件的值' } }, }) </script>
5.$refs的方式获取子节点refs.XXX将会是一个数组
<div id="app"> {{msg}} <!--通过ref="son"来获取子组件--> <test1 ref="son"></test1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script> Vue.component('Test1', { data() { return { title: '子组件的值' } }, template: `<div>{{title}}</div>` }) var vm = new Vue({ el: '#app', data() { return { msg: '这是父组件' } }, mounted() { //获取子组件 console.log(this.$refs.son) }, }) </script>
6.通过children
children来获所以的组件，返回值是一个数组
