1、父子(向下)传值：通过属性 // 1、传递的属性不能出现大写。需要用-分割。大写转为小写 // 2、从父级接收过来的数据是不允许直接修改。 // 3、接收过来的属性名，不允许与当前组件的数据名（data属性名）相同
<body> <div id="root"> <input type="button" @click="fn" :value="n"> <one :abc="n"></one> </div> </body> <script> new Vue({ el:"#root", data:{ n:1 }, components:{ one:{ // 通过props可以限制接收的数据。 props:["abc"], template:` <div>one {{abc}}</div> ` } }, methods:{ fn(){ this.n ++; } } }) </script>
2、子父（向上）传值：通过自定义事件 <wrap v-show="isShow" @abcdefg="changeIsShow"></wrap> @click="$emit('abcdefg',false)" 3、非父子传值：通过bus. *发布与订阅需要在同一个实例下才能够起效果。 $on:接收消息 $off:取消订阅。 $once:接收一次 $emit:发布消息
<div id="root"> <input type="button" @click="fn" :value="num"> <My></My> </div> </body> <script> // 发布者与订阅者。 new Vue({ el:"#root", data:{ num:1 }, methods:{ fn(){ // 发布一个名字为one的消息。 this.$emit("one",1,2,3,4); } }, components:{ My:{ methods:{ fn(){ this.$emit("one",2,3,4,5); console.log("我是子组件My的一个函数") } }, template:` <div><input type="button" @click="fn"></div> ` } }, mounted(){ // 声明订阅者,订阅了一个名字为one的消息 this.$on("one",(a,b,c,d)=>{ this.$off("one"); console.log(1111111111,a,b,c,d); }) } }) </script>
ref
父组件调用子组件的数据和方法
this.$ref.子组件的ref标识.子组件的数据或方法
子组件调用父组件的数据或方法
this.$parent.父组件数据或方法