随笔- 239  文章- 79  评论- 773 

  组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式。

一、直接访问

  Vue提供了三个实例属性,可直接访问父组件、子组件和根实例,如下所列。

  (1)$parent:父组件。

  (2)$root:根实例,如果没有父实例,那么读取的将是自身。

  (3)$children:直接子组件,无法获取隔代的子组件,并且不保证组件的顺序,也非响应式。

  下面用一个示例来演示它们的用法,首先创建两个父子关系的组件parent和child;接着初始化根实例vm,挂载的<div>元素包含parent组件;最后为根实例和parent组件的数据对象添加name属性。

<div id="container">
  <parent></parent>
</div>
<script>
  Vue.component("child", {
    template: '<p>子组件</p>',
    mounted: function() {
      this.$parent.name;      //"parent"
      this.$root.name;        //"root"
    }
  });
  Vue.component("parent", {
    data: function() {
      return {
        name: "parent"
      };
    },
    template: '<child></child>'
  });
  var vm = new Vue({
    el: "#container",
    data: {
      name: "root"
    }
  });
  vm.$children;            //[VueComponent]
</script>

  当执行vm.$children时,得到的是一个子组件数组。在child组件的mounted钩子中调用了实例的$parent和$root的name属性,其值分别是“parent”和“root”。

  大部分情况下,应当避免直接修改组件的内部,因为这么做不仅让父子组件紧密耦合,而且还难以追踪是谁发起的变更。

二、ref和$refs

  如果要直接访问子元素或子组件,那么除了使用上文的$children属性之外,还能通过ref特性配合$refs属性实现。

  DOM元素或组件可通过声明ref特性来指定一个索引标识符,即注册引用信息。而父组件的$refs属性则记录了声明过ref特性的子元素和子组件,它的值是一个对象,其键就是ref特性的值。下面是一个简单的例子,注册了父组件parent和子组件child,并且为child组件和<input>元素分别声明了ref特性。

Vue.component("child", {
  template: '<input ref="txt" />',
  mounted: function() {
    this.$refs;        //{txt: input}
  }
});
Vue.component("parent", {
  template: '<child ref="child"></child>',
  mounted: function() {
    this.$refs;        //{child: VueComponent}
  }
});

  在两个组件的mounted钩子中,读取了各自实例的$refs属性。如果要在parent组件中读取child组件的$refs属性,那么可以像下面这样。

this.$refs.child.$refs

  注意,$refs不是响应式的,并且在渲染到页面之前是无法访问的,即不能在mounted之前的钩子中使用。

  当ref特性与v-for指令配合时,引用的将是一个数组,如下所示。

Vue.component("child", {
  data: function() {
    return {
      names: ["strick", "freedom"]
    };
  },
  template: `<div>
      <input v-for="item in names" ref="txt" />
    </div>`,
  mounted: function() {
    this.$refs;     //{txt: [input, input]}
  }
});

三、自定义事件

  组件支持自定义事件,并且能在子组件中触发该事件,从而实现组件之间的通信。假设有两个父子关系的组件parent和child,在child组件上声明了自定义的dot事件,而在<button>元素上添加了click事件,它们接收的事件处理程序都叫add,如下所示。

Vue.component("child", {
  template: '<button @click="add">提交</button>',
  methods: {
    add: function() {
      this.$emit("dot", 1, 2);
    }
  }
});
Vue.component("parent", {
  template: '<child @dot="add"></child>',
  methods: {
    add: function(left, right) {
      console.log(left, right);        //1 2
    }
  }
});

  Vue提供的实例方法$emit(),它的第一个参数是要触发的事件名称,其余参数都将回传给该事件的处理程序。在子组件child的add()方法中向$emit()传递了三个参数(“dot”、1和2),父组件parent中的add()方法能接收从子组件传递过来的两个数值(1和2)。

  注意,自定义的事件名称不要用驼峰的命名方式,因为它没有等价的连字符分隔式的名称,例如下面的addNumber和add-number是两个事件。

<child @addNumber="handle"></child>
<!-- 不同 -->
<child @add-number="handle"></child>

  在DOM模板中,由于事件名称会被自动转换为小写,因此像下面这样调用addNumber事件将会失败。但在字符串模板中不会受其影响,依然能调用成功。

this.$emit("addNumber");

1)v-model

  组件也支持v-model指令,但需要做些配置。默认情况下,组件的v-model只监听value特性的变化以及input事件。如果要定制,那么可以使用model选项,并且需要在props中添加要监听的特性。下面注册一个checkbox组件,并让它的v-model指令关联模板内的复选框的checked特性和change事件。

Vue.component("checkbox", {
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  },
  template: '<input type="checkbox" :checked="checked" @change="dot" />',
  methods: {
    dot: function(e) {
      console.log(e.target.checked);
    }
  }
});

  在将v-model作用于checkbox组件上后(如下所示),每次点击渲染出的复选框,就会在控制台输出当前的选中状态。

<div id="container">
  <checkbox v-model="current"></checkbox>
</div>
<script>
  var vm = new Vue({
    el: "#container",
    data: {
      current: true
    }
  });
</script>

 

 posted on 2019-11-04 09:36  咖啡机(K.F.J)  阅读(...)  评论(... 编辑 收藏