hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

Vue躬行记(5)——组件通讯

2019-11-18杂谈搜奇网29°c
A+ A-

  组件之间除了坚持自力以外,还须要互相通讯,本章将引见几种通讯的体式格局。

一、直接接见

  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>

 

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
Vue躬行记(5)——组件通讯

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/282235.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>