本文是我从各大网站收集来的通讯方式，可能会有不足，欢迎补充！！！！
- 父传子 props的传参方式
通过props里面的值在子组件上与父组件的数据进行绑定就能获取到父组件中的数据
props 传值 父组件传递给子组件很方便， 但是 父组件想要传递给孙组件很不方便
props的缺点：子不能直接修改父组件的数据
父子组件间的传值
1.父组件向子组件进行传值（props）
父组件里面写：
<Child :msg="message"></Child>
data:{
return:{
message:"这是父组件要给子组件传递的值"
}
}
下面是组件要进行接收
props:{
msg:{
type:String // 传递的为字符串类型
default:"这是默认的值", // 默认值
}
},
传值方式，父组件 可以在标签上 ：向子组件进行传递值
<Child
:name=name
:age = age
></Child>
子组件接收父组件传递过来的值
props:{
name:{
type:String, // 定义接收过来的数据类型
required:true，// 是否为必传
},
age:{
type:Boolean, // 接收过来的数据类型
required:false, // 是否为必传
default:{
// 里面可以设置默认值
}
}
}
- 子传父 $emit
通过$emit 第二个参数对父组件进行传值
// 2.子组件像父组件进行传值: emit （自定义事件）
// 子组件
<div>
<button @click="emit"></button>
</div>
methods:{
emit(){
this.$emit('hhh',"子组件向父组件传递的值")
}
}
// 父组件
<div>
<Child @hhh="jieshou"></Child>
{{main}}
</div>
data(){
return{
main:"这是父组件的数据"
}
},
methods:{
jieshou(value){
console.log(value);
this.main = value
}
}
我们在向父组件传值的时候可以使用 $emit 来进行传递，里面有两个参数
this.$emit('getdata',this.list); // 第一个参数是自定义事件的名字，第二个参数是要传给父组件的数据
// 子组件
<div>
<h1>我是子组件</h1>
<button @click="setData">setData</button>
</div>
data(){
return{
list:'子组件的数据'
}
}
methods:{
setData(){
this.$emit('getdata',this.list);
}
}
- 兄弟组件传值 eventBus
new 一个 Vue 对象来作为中间对象 通过新建 bus.js 文件来做一个中转，进行兄弟组件之间的传值
// 兄弟之间的传值
// 父组件中
<template>
<div>
<List></List>
<News></News>
</div>
</template>
<script>
import List from '@/components/List'
import News from '@/components/News'
export default{
name:'Home',
components:{
List,
News
}
}
</script>
// List 组件
<template>
<div>
<h2>这是List组件</h2>
<button @click='btn'>按钮</button>
</div>
</template>
<script>
import bus form 'utils/bus'
export default{
name:'Home',
data:{
return:{
str3:"这是list给兄弟的"
}
},
methods:{
btn(){
// bus.str3= 'this.str3'
bus.$emit('change',this.str3);
}
}
}
</script>
// News 组件
<template>
<div>
<h2>这是News组件</h2>
</div>
</template>
<script>
import bus form 'utils/bus'
export default{
name:'Home',
data:{
return{
str3:'',
}
},
created(){
bus.$on('change',val=>{
console.log(val)
})
}
}
</script>
// 我们需要创建一个公共的类 BUS
新建一个 utils/bus.js
import Vue from 'Vue'
export default new Vue();
- 父组件使用子组件的数据和方法 $refs
在子组件上定义ref=""再通过$refs.ref 去获取对应的dom 2. ref 来获取原生的DOM，父组件可以直接利用这个操作子组件
父组件可以直接拿到子组件的数据，需要在父组件上面给子组件上面绑定一个ref
<List ref ='Child'></List>
this.$refs.child.xxx = 'yyyy'>
<!-- 父组件 -->
<template>
<div>
<h1 @click='btn'>这是父组件{{str2}}</h1>
<List ref='child'></List>
</div>
</template>
<script>
import List from '@/components/List'
export default{
name:'Home',
data:{
return:{
str2:''
}
},
components:{
List
},
methods:{
btn(){
this.$refs.child.str2='11111' // 点击文字就可以让子组件里面的str2进行了变化
}
}
}
</script>
子组件直接使用父组件的数据
子组件通过: this.$parent.xxx 使用父组件的数据，这种方式子组件可以直接修改父组件里面的数据 methods:{
this.$parent.str1 // 可以获取到父组件里面str1的值
}
provide / inject
依赖注入
优势：父组件可以直接向某个后代组件传值（不用一级一级的传递）
父组件中：
export default{
provide(){
return{
val1:'这是父组件中val1的值'
}
}
}
子组件接收值：
export default{
inject:[val1]
}
