父子通信

这里记录下比较常用的父传子和子传父通信。

  1. 父传子通信

首先，我们要了解以下几点

A.在父组件的根实力data里面定义要传递的数据。如以下代码的定义的fruit

1  new Vue({
2       el:'#app',
3       data(){
4         return{
5           fruit:['苹果','香蕉','草莓','葡萄']
6         }
7       },
8       
9     })

B.在子组件身上绑定自定义属性。如以下代码的my-favorite

1   <my-component :my-favorite="fruit"></my-component>

C.子组件用props去接收父组件传过来的参数。如以下代码myFavorite

 Vue.component('myComponent',{
      props:['myFavorite'],
      template:`
          <div>
            <ul>
              <li v-for="item in myFavorite">{{ item }}</li>
            </ul>
          </div>
      `
    })

完整代码如下：

 1 <body>
 2   <div id="app">
 3       <!-- 3.使用子组件 -->
 4       <my-component :my-favorite="fruit"></my-component>
 5       
 6   </div>
 7   <script>
 8     //1.定义一个全局的子组件
 9     Vue.component('myComponent',{
10       props:['myFavorite'],
11       template:`
12           <div>
13             <ul>
14               <li v-for="item in myFavorite">{{ item }}</li>
15             </ul>
16           </div>
17       `
18     })
19     new Vue({
20       el:'#app',
21       data(){
22         return{
23           fruit:['苹果','香蕉','草莓','葡萄']
24         }
25       },
26     })
27   </script>
28 </body>

 最后数据渲染出来的效果：

　　2.子传父通信

掌握子传父通信要了解以下几点

A.在子组件身上绑定一个自定义事件。如以下代码@delete

1 <my-component @delete="resetHandle"></my-component>

B.在子组件内部添加一个点击事件，然后在点击事件里面通过`this.$emit`触发自定义事件。`this.$emit()`接收两个参数，第一个参数是要触发的自定义事件名，第二个参数起以及后面所有的参数都是要传递给父组件的参数，如以下代码

 1  Vue.component('myComponent',{
 2       template:`
 3         <div>
 4           <button @click="handleclick">点我有惊喜</button>
 5         </div>
 6       `,
 7       methods:{
 8         handleclick(){
 9             // 触发了自定义事件，并将666传给父组件
10           this.$emit('delete','666')
11         }
12       }
13     })

C.在父组件的根实力添加子组件身上绑定的自定义事件处理函数`resetHandle`

 new Vue({
      el:"#app",
      data:{
        num:0
      },
      methods:{
        resetHandle(num){
            // 接收666过来并赋值给num
          this.num = num
        }
      }
    })

完整代码如下：

<body>
  <div id="app">
    {{ num }}
    <my-component @delete="resetHandle"></my-component>
  </div>
  <script>
    Vue.component('myComponent',{
      template:`
        <div>
          <button @click="handleclick">点我有惊喜</button>
        </div>
      `,
      methods:{
        handleclick(){
            // 触发了自定义事件，并将666传给父组件
          this.$emit('delete','666')
        }
      }
    })
    new Vue({
      el:"#app",
      data:{
        num:0
      },
      methods:{
        resetHandle(num){
          console.log(num);
          this.num = num
        }
      }
    })
  </script>
</body>

渲染效果：

 

 当点击子组件后，父组件拿到参数后的效果

 

posted @ 2020-12-29 21:54  mirabel  阅读(344)  评论(0)    收藏  举报