VUE父子组件传递数据

2019-02-13 admin

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传递的数据,并修改目标对象。

原文链接:https://segmentfault.com/a/1190000018130176

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53615.html

文章标题:VUE父子组件传递数据

相关文章
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
回到顶部