Vue中常用组件通信传值方法(1)，微信web开发工具使用教程

渐进式JavaScript框架----vue，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。接下来介绍下Vue在实际项目开发中一些比较常用的组件传值通信方法。

1.父子组件通信（$emit、props）

---

• 父传子

父组件中用:或v-bind来进行数据绑定

import子组件的位置，用component局部注册子组件

App.vue

在子组件中用props，以对象的形式来接收子组件

Child.vue

• 子传父

子组件给父组件传递主要用$emit来传递，示例如下

Child.vue

App.vue

在父组件调用子组件的地方绑定一个@confirm

这个confirm哪来的呢？就是子组件在emit中定义好的

this.$emit('confirm',this.childMessage)

• 第一个入参是事件名，第二个是具体的值

父组件中不需要在接收的时候定义任何形参，默认的第一个形参就是子组件过来的值

confirm(val){

alert(val)

}

这样就实现了子组件中按钮点击触发事件，把子组件中的任意参数带过来。

2.$ref$refs

---

vue中使用ref可以取到子组件中的变量或方法

怎么使用呢？

只需要在子组件标签定义

使用的时候

this.$refs.childRef.childFunc()

this.$refs.childRef.childMessage

这里this.$refs.childRef就表示了子组件这个对象了，可以分别取其中的值的方法

App.vue

Child.vue

3.$router路由传参

---

我们在Demo1组件即将跳转到另一个组件的时候往this.$router里面装一个参数进去

this.$router.param = param

在Demo2组件create的时候打印一下这个

console.log(this.$router.param);

就可以看到Demo1带过来的参数了

Demo1.vue