vue组件通信（props,$emit,$attrs,$listeners）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

朝颜陌

vue基础----组件通信（props,$emit,$attrs,$listeners）

一、父传子，子传孙

1. props

1>在父组件中通过子组件自定义的标签属性来传递数据。

2>在子组件中通过props声明希望用到的数据

1 <body>
2 <div id="app">
3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>
4 </div>
5 <script src="./node_modules/vue/dist/vue.js"></script>
6 <script>
7 let vm = new Vue({
8 el:"#app",
9 data:{
10 msg:"hello yilia"
11 },
12 methods:{
13 fn(){
14 console.log("father");
15 }
16 },
17 components:{
18 "my-father":{
19 // props:['msg1'],
20 // template:`<div><h1>{{msg1}}</h1><my-son :msg2="msg1"></my-son></div>`,
21 created(){
22 console.log(this.$attrs);
23 console.log(this.$listeners);
24 console.log(this);
25
26 },
27 template:`<div><h1></h1><my-son v-bind="$attrs" v-on="$listeners"></my-son></div>`,
28 data(){
29 return {
30
31 }
32 },
33 components:{
34 "my-son":{
35 props:['msg1'],
36 template:`<p @click="$listeners.click1()">{{msg1}}</p>`,
37 inheritAttrs:true,
38 data(){
39 return{
40 }
41 }
42 }
43 }
44 }
45 }
46 });
47
48 </script>
49
50 </body>

1.1这里需要注意的props 除了上述这种写法，还可以写成对象形式，来校验数据

1 props: {
2 a: {
3 type: Number,
4 default: 10
5 },
6 b: {
7 type: String,
8 validator(val) {
9 return val>0; // "2">0
10 }
11 },
12 arr: {
13 type: Array,
14 //假如属性是数组或对象默认值需要通过函数返回
15 default:()=>([1])
16 }
17 },

2.有时候my-father这块用不到数据，但需要把爷爷的数据传给孙子，可以用$attrs,在 my-son v-bind="$attrs"

this.$attrs 对没有使用的属性保留在this.$attrs (也就是props中没有申明的属性)

1 <body>
2 <div id="app">
3 <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father>
4 </div>
5 <script src="./node_modules/vue/dist/vue.js"></script>
6 <script>
7 let vm = new Vue({
8 el:"#app",
9 data:{
10 msg:"hello Yilia"
11 },
12 methods:{
13 fn(){
14 console.log("father");
15 }
16 },
17 components:{
18 "my-father":{
19 // props:['msg1'],
20 template:`<div><h1></h1><my-son v-bind="$attrs"></my-son></div>`,
21 data(){
22 return {
23 }
24 },
25 components:{
26 "my-son":{
27 props:['msg1'],
28 template:`<p>{{msg1}}</p>`,
29 inheritAttrs:true, //为false的时候，没有用到的数据不会显示在dom结构上
30 data(){
31 return{
32 }
33 }
34 }
35 }
36 }
37 }
38 });
39 </script>
40 </body>

二、点击子组件，调用父组件的方法 (想在父组件中绑定原生事件给组件)

1.需要添加修饰符native,不添加就被当作一个属性对待

1 <body>
2 <div id="app">
3 
4 <my-button @click.native="fn"></my-button>
5 </div>
6 <script src="./node_modules/vue/dist/vue.js"></script>
7 <script>
8 let vm = new Vue({
9 el: "#app",
10 methods:{
11 fn() {
12 console.log("fn() is called");
13 }
14 },
15 components: {
16 "MyButton": {
17 template: `
18 <div>
19 点我
20 </div>`
21 }
22 }
23 });
24 </script>
25 </body>

点击 “点我” 的时候父组件的fn函数被调用。

2.$listeners 绑定所有的方法，直接调用父组件的方法

1 <body>
2 <div id="app">
3 
4 <my-button @click="fn"></my-button>
5 </div>
6 <script src="./node_modules/vue/dist/vue.js"></script>
7 <script>
8 let vm = new Vue({
9 el: "#app",
10 methods:{
11 fn() {
12 console.log("fn() is called");
13 }
14 },
15 components: {
16 "MyButton": {
17 mounted(){
18 console.log(this.$listeners);
19 //{click: ƒ}
20 },
21 template: `<div @click="$listeners.click()">点我</div>`
22 }
23 }
24 });
25 </script>
26 </body>

3.子组件想调用父组件的方法 $emit

1> 在子组件中调用$emit()方法发布一个事件

2> 在父组件中提供一个在子组件内部发布的事件处理函数

3> 在父组件订阅子组件内部发布的事件

1 <body>
2 <div id="app">
3 
4 
5 <my-button @click="fn" @mouseup="fn"></my-button>
6 </div>
7 <script src="../01-vue-basic/code/node_modules/vue/dist/vue.js"></script>
8 <script>
9 // 组件通信 props $emit $attrs $listeners
10 /*
11 子如何传父
12 1 在子组件中调用$emit()方法发布一个事件
13 2 在父组件中提供一个在子组件内部发布的事件处理函数
14 3 在父组件订阅子组件内部发布的事件
15 */
16 let vm = new Vue({
17 el: "#app",
18 data: {
19 content: "点我"
20 },
21 methods:{
22 fn(num) {
23 console.log(num,"fn() is called");
24 }
25 },
26 components: {
27 "MyButton": {
28 mounted() {
29 console.log(this.$listeners);// 绑定所有的方法
30 },
31 template: `
32 <div>
33 <button @click="$listeners.click(123);">点我</button>
34 <button @click="$emit('click2',23)">点我</button>
35 <button @click="$listeners.click(123);" @mouseup="$listeners.mouseup(123);">点我</button>
36 <button v-on="$listeners" >点我</button>
37 </div>
38 `
39 }
40 }
41 });
42 </script>
43 </body>