关闭

父组件与子组件的通信

标签: Vue组件通信父组件子组件
68人阅读 评论(0) 收藏 举报
分类:

首先我们得弄清楚什么是父组件什么是子组件,我们从下面的例子中来了解

<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

父组件:my-component

子组件:template


父组件向子组件通信

我们需要用到props

<my-component idx="父组件想要给子组件传递的内容"></my-component>
Vue.component('my-component', {
  props: ['idx'],//将idx设置为自定义属性
  template: '<div>A custom component!{{idx}}</div>'//将idx的内容加在子组件后面
})

子组件想父组件通信

我用的例子是Vue官网上的例子,需要用到$emit().

了解官方详情$emit()

<div id="counter-event-example">
   <p>{{ total }}</p>
   <button-counter v-on:increment="incrementTotal"></button-counter><!--@-->
   <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
//一个组件相当于一个Vue实例,实例里面有的内容,组件就能够有
//组件与实例的区别:1、组件中不用el,2、组件中的data必须是方法
Vue.component('button-counter', {
   template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
   data: function () {
      return {
          counter: 0
      }
   },
   methods: {
       incrementCounter: function () {
           this.counter += 1
           //子组件修改父组件内容,发射自定义事件
           this.$emit('increment')  //这里的increment与HTML中注释为@的对应
       }
   },
})
new Vue({
   el: '#counter-event-example',
   data: {
      total: 0
   },
   methods: {
      incrementTotal: function () {
          this.total += 1
      }
   }
})

运行结果:
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7283次
    • 积分:1037
    • 等级:
    • 排名:千里之外
    • 原创:99篇
    • 转载:7篇
    • 译文:1篇
    • 评论:1条
    文章分类
    最新评论