vue基礎----組件通訊（props,$emit,$attrs,$listeners）

時間  2019-11-08
標籤 vue 基礎 組件 通訊 props emit attrs listeners 简体版
原文   原文鏈接

1、父傳子，子傳孫vue

　　1. propsnode

　　　　1>在父組件中經過子組件自定義的標籤屬性來傳遞數據。數組

　　　　2>在子組件中經過props聲明但願用到的數據app

 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 除了上述這種寫法，還能夠寫成對象形式，來校驗數據dom

 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中沒有申明的屬性)this

 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>

2、點擊子組件，調用父組件的方法 (想在父組件中綁定原生事件給組件)spa

1.須要添加修飾符native,不添加就被看成一個屬性對待code

 1 <body>
 2     <div id="app">
 3         <!--想在父組件中綁定原生事件給組件 須要加.native 不加就被看成一個屬性看待-->
 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函數被調用。component

2.$listeners 綁定全部的方法，直接調用父組件的方法

 1 <body>
 2     <div id="app">
 3         <!--想在父組件中綁定原生事件給組件 須要加.native 不加就被看成一個屬性看待-->
 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         <!--想在父組件中綁定原生事件給組件 須要加.native 不加就被看成一個屬性看待-->
 4         <!--<my-button @click.native="fn"></my-button>-->
 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程