关于vue.js父子组件数据传递

vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子:

<div id="app2">
  <child message="hello!"></child>
</div>

...

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

new Vue({
	el:"#app2"
});

以上定义了一个全局组件child,在app2的父级作用域中使用时,child组件定义了一个message属性,这样父组件在使用子组件的地方直接通过给child的message属性赋值即可将该值传递到子组件内部,从而输出模板内容:hello!,这里的“hello!”字符串是固定的,如果我们想传入的是app2作用域中的动态数值可以使用如下方式:

<div id="app2">
  <child v-bind:message="parentMsg"></child>
  <input v-model="parentMsg">
</div>

...

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

new Vue({
  el:"#app2",
  data:{
    parentMsg:""
  }
});

这样的话,子组件中的message值完全来自于父组件中的data.parentMsg,父组件的数据操作直接更新到子组件中。

再来看下events up的实例:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <!-- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件,也就是这里的$.emit("increment")事件 -->
  <button-counter v-on:increment2total="incrementTotal"></button-counter>
  <button-counter v-on:increment2total="incrementTotal"></button-counter>
</div>

...

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment2total',{"admin":"############"})
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (value) {
    	alert(JSON.stringify(value));
      this.total += 1
    }
  }
})

子组件模板中声明click事件,调用自身methods方法increment,increment里面通过$emit形式抛出一个事件到对应的子组件:on那里,查找到对应的父组件调用方法为incrementTotal,则直接调用该方法并传递参数。

关于vue.js后续一些学习心得体会均会在此处分享,一步步慢慢学吧。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券