VUE父子组件传递数据

栏目: JavaScript · 发布时间: 5年前

内容简介:父组件 food 通过 props 把 值为 0 的 type 字段传给子组件,子组件在初始化时可以拿到 type 字段,渲染出字符“0 水果”要保证异步传递数据,根据VUE的双向绑定原理,不难得知,异步传递的数据需要watch。若props传递的数据关联到模板中,则组件初始化时会watch该数据。可见下面代码中的type和info。

1. 同步传递数据

父组件 food 通过 props 把 值为 0 的 type 字段传给子组件,子组件在初始化时可以拿到 type 字段,渲染出字符“0 水果”

// 父组件 food.vue
<template>
  <apple :type="type"></apple>
</template>
<script>
    data (){
        return {
          type: 0
      };
      }
</script>
// 子组件 apple.vue
<template>
  <span>{{childType}}</span>
</template>
<script>
   props: ['type'],
   created () {
           this.childType = this.formatterType(type);
   },
   method () {
           formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
   }
</script>

2 异步传递数据

要保证异步传递数据,根据VUE的双向绑定原理,不难得知,异步传递的数据需要watch。

2.1 props

若props传递的数据关联到模板中,则组件初始化时会watch该数据。可见下面代码中的type和info。

若props传递的数据不关联到模板,则为props传递的数据添加watch,在watch方法中修改关联模板的对象。可见下面代码中的child_type。此方法中,watch监听到的是是发生变化的props,故需要对目标对象做初始化处理。

// 父组件 food.vue
<template>
  <apple :type="type" :info="info"></apple>
</template>
<script>
  data (){
    return {
      type: 0,
      info: {comment: 'ugly food'}
    };
  }
  created () {
      setTimeout (()=>{
        this.type = 1;
      this.info = {comment: 'tasty food'};
    },1000);
  }
</script>
// 子组件 apple.vue
<template>
  <div class="memuManage">
    <span>type: {{child_type}}</span>
    <span>type: {{type|formatterType}}</span>
    <span>info: {{info.comment}}</span>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        child_type: ''
      };
    },
    props: ["type","info"],
    watch: {
      type (newVal) {
        this.child_type = this.formatterType(newVal);
      }
    },
    created () {
      this.child_type = this.formatterType(this.type);
    },
    filters: {
      formatterType: function (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    },
    methods: {
      formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    }
  };
</script>

2.2 vuex

数据存放在store中,父组件调用vuex中的方法改变数据。

若store的数据关联子组件的模板,则子组件初始化时会watch该数据。

若store的数据不关联子组件的模板,则为store的数据添加watch,在watch方法中修改关联模板的对象。需要对关联模板的对象初始化。

3. 同步或异步传递数据

若父组件向子组件可能同步或异步传递数据,则首先子组件需要在created或者computed中对目标对象初始化,并且子组件中需要watch由props传递的数据,并修改目标对象。


以上所述就是小编给大家介绍的《VUE父子组件传递数据》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

京东平台运营攻略(全彩)

京东平台运营攻略(全彩)

京东商学院 / 电子工业出版社 / 2015-5 / 69.00元

2014 年年末,京东POP 开放平台的入驻商家已超过6 万,京东平台被广泛关注和认可的同时,在电商江湖中仍颇具神秘色彩。面对碎片化的信息,京东的店铺经营者及希望入驻京东的准商家们,对于在京东如何利用丰富的各类平台资源,搭建并运营京东店铺,一直很难找到全面而系统的资料。 《京东平台运营攻略(全彩)》由京东官方出品,动员了京东内部涉及第三方店铺业务线的众多部门,由多位业务精英参与撰写,保证了内......一起来看看 《京东平台运营攻略(全彩)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具