vue传参

Vue 常用的三种传值方式
1.父传子
2.子传父
3.非父子传值

父子组件的关系
首先，我们要使用Vue的组件传值，我们要知道组件之间的关系。
父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示

什么是Prop
要实现组件传值，我们要了解什么是prop。
Prop是用来传递数据的一种自定义属性。
Prop是单向数据流。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

父传子
父组件的内容传递给子组件其实很简单
首先建立俩个Vue的组件，例father.vue,child.vue
在father.vue的组件写上

父组件：

记住，我们的template下，只能拥有一个标签
在child.vue的组件写上

子组件：

我们把子组件的内容引入到父组件里
于是，我们在father.vue导入

import child from ‘./child.vue’ // 引入子组件

然后，我们开始注册自定义标签

export default {
name: “father”,
components:{
child //这个名字是上面我们引进来的child.vue,俩个名字需相同
}
}

父组件：

1 2 3 4 5 6 我们开始v-model绑定数据 在data数据里写上name

export default {
name: “father”,
data() {
return {
name: ‘’
}
},
components:{
child //这个名字是上面我们引进来的child.vue,俩个名字需相同
}
}

data里的数据为什么要return出来呢？
1.不使用return 出来的数据会在项目的全局可见，会污染全局
2.使用return 出来的数据只能在当前组件中使用，不会影响其他组件

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

我们在组件中绑定data数据的name,在自定义标签中传递要传递的值

父组件：

最后，在child.vue组件中利用props来接收传递来的参数

export default {
name: “child”,
data() {
return {}
},
props: [‘notice’]
}

在上面的模板中运用传递来的参数

子组件：{{notice}}

父传子所有的代码
father.vue

父组件：

child.vue的代码

子组件：{{notice}}

子传父
首先，我们要点击一个按钮，使子组件的值传到父组件。
于是，我们在子组件，写点击事件。
（这里在input的标签上绑定数据，还是和之前的一样）

子组件： //双向绑定childvalue

export default {
name: “child”,
props: [‘notice’], //接收父组件传递的值
data() {
return {
childvalue:this.notice
}
},
methods: {
childclick() {
this.$emit("childByvalue",this.childvalue)//利用$emit的方法把值传递给父组件
}
}
}

我们在父组件中接收传递的值利用的是v-on:，简写用@

<child :notice=“name” @childByvalue=“childByvalue”>

在下面的methods写方法

methods : {
childByvalue (val) {
this.name=val
}
},

这时候细心的同学会发现子传父可以了，但父传子不能用了。
这时候就用到了watch来监听了。
在父组件中监听传递过了的值。

watch:{
notice () {
this.childvalue=this.notice
}
},

这样父子组件的通信就完成了。
父组件的完整代码

父组件：

子组件的完整代码

子组件：

非父子传值（兄弟组件传参）
非父子传参，需要有共同的父组件。需要定义公共的公共实例文件，作为中间仓库。不然达不到传值效果。
创建bus.js做为公共的仓库文件
bus.js内容为

import Vue from ‘Vue’
export default new Vue

创建child1.vue,child2.vue
child1.vue内容为

child1 {{msg}}

child2的内容为

child2 {{cmsg}}

在父组件中导入注册

import child1 from ‘./child1.vue’
import child2 from ‘./child2.vue’

components:{
child1,
child2
}

<child1></child1>
<child2></child2>