• 技术文章 > web前端 > js教程

    vue父子组件同步传递和异步传递的介绍(附代码)

    不言 不言 2019-02-13 09:53:34 转载 367

    本篇文章给大家带来的内容是关于vue父子组件同步传递和异步传递的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    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>
      <p class="memuManage">
        <span>type: {{child_type}}</span>
        <span>type: {{type|formatterType}}</span>
        <span>info: {{info.comment}}</span>
      </p>
    </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父子组件同步传递和异步传递的介绍(附代码)的详细内容,更多请关注php中文网其它相关文章!

    第七期线上培训班
    专题推荐: javascript vue.js
    上一篇:JavaScrip数据结构之数组的相关操作介绍(附示例) 下一篇:ES6、ES7和ES8常用的特性总结(代码示例)

    相关文章推荐

    • javascript - 有把Vuejs结合到Yii2中的实例嘛?求分享 • javascript - vue.js列表里面 按钮权限什么的怎么搞? • Vue.js如何在Laravel封装组件 • Vue.js适合制作移动端的Webapp吗? • MongoDB客户端工具MongoVUE破解版

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网