Vue教程17：组件间通信之一：通过组件实例通信

[chencl1986]

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

该节教程代码可通过npm start运行devServer，在http://localhost:8080/查看效果

父级获取子级实例实现通信

代码示例：/lesson17/src/components/parent.js，/lesson17/src/components/child.js

在父组件引用子组件时，给子组件设置ref="child"属性，父组件就可以通过this.$refs.child获取到子组件实例。
此时父组件就可以通过直接修改子组件的属性this.$refs.child.num1++，或者调用子组件方法this.$refs.child.add()，实现子组件属性变化。

子级获取父级实例实现通信

代码示例：/lesson17/src/components/parent.js，/lesson17/src/components/child.js

父组件将实例this，通过props属性parent传递给子组件。
此时子组件就可以通过直接修改父组件的属性this.parent.num1++，或者调用子组件方法this.parent.add()，实现子组件属性变化。

parent组件代码：

export default Vue.component('parent', {
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  components: {
    Child
  },
  methods: {
    add() {
      this.num2++
    },
    addChild1() {
      this.$refs.child.num1++
    },
    addChild2() {
      this.$refs.child.add()
    },
  },
  template: `
    <div>
      <div>父级
      num1：{{num1}}
      num2：{{num2}}
      <br/><input type="button" value="子级num1 +1" @click="addChild1" /><br/><input type="button" value="子级num2 +1" @click="addChild2" /></div>
      <child ref="child" :parent="this"></child>
    </div>
  `
});

child组件代码：

export default Vue.component('parent', {
  props: ['parent'],
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  methods: {
    add() {
      this.num2++
    },
    addParent1() {
      this.parent.num1++
    },
    addParent2() {
      this.parent.add()
    },
  },
  template: `
    <div>
      子级
      num1：{{num1}}
      num2：{{num2}}
      <br/><input type="button" value="父级num1 +1" @click="addParent1" />
      <br/><input type="button" value="父级num2 +1" @click="addParent2" />
    </div>
  `
});