父组件
<child :childMsg="parentMsg"></child>
data(){
return{
//父组件的数据
parentMsg:'父组件将要给子组件的数据'
}
}
子组件（Child）
<p>{{childMsg}}</p>
props:{
childMsg:{
type:String, //类型可以定义
default:'' //默认是空值
}
},
//或者直接props:['childMsg'],这种写法也行
mounted() {
console.log(this.childMsg);//获取过来的直接当作data数据的用法来用
},
根据业务选择方式，这边列举三种当然还有其他的
方法一：$emit
方法二：$children/$parent
方法二：$refs
一：
子组件（mChild）
<button @click="childFn">
data(){
return {
pushParent:'即将要给父组件的值'
}
}
methods:{
childFn(){
//第一个参数自定义事件名，第二个是数据
this.$emit("childFnGetParent",pushParent)
}
}
父组件
<p>{{msg}}</p>
<m-child @childFnGetParent="parentFn"></m-child>
data(){
return {
mag:''
}
}
methods:{
parentFn(val){
this.msg=val
}
}
二：
父传子第二种方法（$children/ $parent）
这种方法就不多解释了，挺容易理解的，实在不理解可以打印this. c h i l d r e n / t h i s . children/this. children/this.parent 就可以获取到相关组件信息
三：
父传子的第三种方法（ref）
在父组件中的子组件m-child中添加一个ref=“事件名“，同样可以获取到i相关组件信息
用于祖先与后代传值
简单贴张图
传值思想其实是一致的，先使用
$on定义一个全局事件，后面写个回调函数，触发这个事件执行的方法，可以接参数bus.$on('msg',val=>{ })，msg就是全局事件，然后在想要获取这个全局事件里面的值就调用他，不过这时候不是 this. e m i t 而是 b u s . emit 而是 bus. emit而是bus.emit
事件主线bus.js下面的代码
import Vue from 'vue'
export default new Vue() //创建一个实例对象
这是两个组件传值,在互相传值各组件中引入bus.js文件
import bus from "../bus.js"
在A组件中通过$emit调用自定义函数并且传参
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue),//注册时间相当于你创建的实例对象 vm.$emit注册事件并传值
}
}
}
</script>
B组件 用$on事件来接收参数
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
this.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
全局组件传值,单个组件调用
然后在所有需要用到这个文件下面的数据只需要导入这个文件就行
在APP.vue下面定义一个方法
//全局中定义的方法名
methods:{
passMsg(){
//注意这里的写法
bus.$emit('msg','要传入的数数据')//自定义事件都用emit
}
}
//子组件利用勾子函数监听事件
mounted(){
bus.$on('msg',(val)=>{
})
}
注意的是 在页面销毁的时候需要吧bus销毁掉
destroyed() {
bus.$off("child2", this.destroyedMessage);
}
在App.vue下面定义数据并且把想要的数据全部绑定到相应的子组件上面
然后在在其父组件上面绑定一个v-bind=‘$attrs’ 注意这里不能简写，如果本身有的数据跟vue的数据名相同时，他会自动过滤
v-bind="$attrs" v-on="$listeners"v-bind="
a
t
t
r
s
"
监听数据
v
−
o
n
=
"
attrs" 监听数据 v-on="
attrs"监听数据v−on="listeners 监听事件
最外层的组件
<Bro sex="男" name="xxx" @handleChange="getName"></Bro>
下一层的组件
<Son v-bind="$attrs" v-on="$listeners"></Son>//必须要这样写不能改变
获取数据的组件
export default {
components: { Last },
mounted() {
console.log(this.$attrs);
}
}
如果还要把这个数据往下传就是组件继续v-bind="$attrs"往下传
<Last v-bind="$attrs"></Last>
另外他的这种传值方式都是使用props传的只是用了一个组件过度，其实还有另外一种写法就是使用props的
最外层组件
<Bro sex="男" name="xxx" @handleChange="getName"></Bro>
下一级组件
<Son v-bind="$attrs" v-on="$listeners" :dataMsg="dataMsg"></Son>
最里面的组件，不仅可以使用props拿到上级的还可以拿到上上级的
其中还有inheritAttrs 的用法 默认是true，就是讲数据绑定在组件上，自己去研究
逻辑过于简单，直接贴图自己实践
最里面组件
中间的组件都需要添加v-bind="$attrs" v-on="$listeners",不管中间有多少层
<Son v-bind="$attrs" v-on="$listeners" :dataMsg="dataMsg"></Son>
最外层
由于不是本篇讨论的东西，里面东西太多不过多展示有兴趣可以看下这个vuex的使用
剩下的还有路由传值，本地缓存等等这些都属于基础传值，自己去了解这里就这哪是先介绍这么多