Vue 实现父子组件交流

标签: Vue
24人阅读 评论(0) 收藏 举报

关于传递信息这个问题,在 Vue 中我认为有两种方式:

  1. 父子组件进行 props 传递信息
  2. 通过 Vuex 状态树进行管理

在我认为,不是有 Vuex 的项目就一定要用 Vuex。像我今天碰到的需求,是父组件在 mounted 的时候,先拉取数据,然后传给一个子组件。子组件拿到数据后进行重新渲染。根据这样的需求,我选择通过 props 来实现更加简便,不用维护 Vuex。

首先说明,我用的是 Vue 2.5


实现方式

父组件

首先是 Html 部分,我定义了一个 child 组件,然后定义了一个 name 属性传递给子组件

<div class='chart-container'>
   <child :name="name"></child>  
</div>

然后在 data 方面进行返回:

export default {
  data() {
    name: 'child'
  }
}

上面定义了父组件的一个属性:“name”,并进行赋值为“child”。我们可以在其他地方调用 this.name = *** 来进行更新值。


子组件

首先子组件需要进行接收(注意,父组件传过来的是一个基本数据类型 String,不是对象。有关对象的传递方法可以看 props 讲解)

export default {
  props: {
    name: {
      type: String,  // 定义接收的类型为 String,防止传递出错
      default: ''    // 默认值为空字符串
    }
}

接收完了之后,我们就可以在这个组件进行使用啦。

如果是在组件属性赋值,那么就这么写:

<input :value="name"/>

如果是不是属性,可以这么写:

<div>{{ this.name }}</div>

如果是组件方法里也是通过 this.name 来调用。



Prop 验证

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发生警告。

要指定验证规则,需要用对象的形式来定义 prop,而不用字符串数组

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

上面的 type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol

type 也可以是一个自定义的构造器,使用 instanceof 检测。




查看评论

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: //这里必须要用 - 代替驼峰 data(){ return { msg:...
  • mr_fzz
  • mr_fzz
  • 2017-01-20 23:46:06
  • 68530

Vue父子组件互相通信实例

组件实例之间的作用域是独立的,意味了不应该在子组件的模板内直接引用父组件的数据,但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。 prop 是父组件...
  • major_zhang
  • major_zhang
  • 2018-01-20 20:23:47
  • 321

vue如何实现父子组件通信,以及非父子组件通信(待看)

https://vuefe.cn/v2/guide/components.html# 非父子关系 var vm = new Vue({ el: '#list', ready: functio...
  • melody_day
  • melody_day
  • 2016-12-08 10:14:04
  • 2665

vue2.0父子组件双向绑定

父组件代码如下。这里要注意的有: 1. 父组建使用msg向子组件传递数据。 2. 子附件向父附件发送xxx消息,父组件收到消息后用abc方法来处理。 ...
  • xgbm_k
  • xgbm_k
  • 2017-08-29 10:12:03
  • 721

vue父子组件互相传值

官网上有较详尽的介绍:http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 以下是本人项目实践后...
  • sinat_30691131
  • sinat_30691131
  • 2016-10-07 22:31:47
  • 2104

总结vue父子组件之间的通信

一 环境搭建 步骤 1 打开git,运行npm  install --global vue-cli 这是安装vue的命令行         2 vue init webpack vue-demo ...
  • Johnny0991
  • Johnny0991
  • 2017-11-15 11:03:10
  • 3768

vue2.0之非父子组件通信

在vue的1,0版本里,组件之间的通信是通过$dispatch和$broadcast来进行通信的,但是在2.0版本里面则取消上述这两个方法,并提出了新的解决办法。关于vue2.0的父子组件的通信上文也...
  • Tank_in_the_street
  • Tank_in_the_street
  • 2017-06-11 16:31:45
  • 680

vue基础语法以及父子组件如何相互传值

vue模板引擎语法,关注数据层面 Mustache语法:{{msg}} 主要是用date控制 html赋值:v-html=”“ 绑定属性:v-bind:id=”“ 使用表达式:{OK?”yes”:”...
  • zhang5207892
  • zhang5207892
  • 2017-11-05 20:49:28
  • 1546

vue2.0父子组件以及非父子组件通信传参详解

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: parent> child :child-msg="msg">/child>//这里必须要...
  • binginsist
  • binginsist
  • 2017-04-01 10:30:42
  • 11109

vue非父子组件通信问题解决记录

问题描述:最近在做登录部分时遇到一个场景,当点击 “用户”按钮时,首先渲染login组件,在用户登录后直接跳转到用户信息界面(user组件)。这里遇到了需要将login组件通过异步请求获得的用户信息传...
  • Clark_Fitz817
  • Clark_Fitz817
  • 2018-01-29 13:12:44
  • 383
    个人资料
    持之以恒
    等级:
    访问量: 1848
    积分: 140
    排名: 110万+
    文章存档
    最新评论