vue父组件向子组件传递数据

vue父组件怎么向子组件传递数据呢？不知道的小伙伴来看看小编今天的分享吧!

vue父组件向子组件传递数据的方法有四种：props和event、ref、provide和inject、vuex 。
1、props和event
父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据，代码如下：
//子组件
<template>
<div @click="changeName('YYY')">{{name}}</div>
</template>
<script>
export default{
props:['name'],//or props:{name:{type:String,default:''}}
methods:{
//不能在子组件修改props数据，应触发事件让父组件处理
changeName(newName){
this.$emit('changeName',newName)
}
}
}
</script>
//父组件
<template>
<div>
<child-comp :name="name" @changeName="changeName"></child-comp>
</div>
</template>
<script>
import childComp from 'path'
export default{
data(){
return {name:'XXX'}
},
components:{
childComp
},
methods:{
changeName(newName){
this.name = newName;
}
}
}
</scritp>
以上就是一个完整的流程，父组件通过props将数据传递给子组件，子组件则触发事件，由父组件监听，并做相应处理。

文章插图

2、ref
ref属性可定义在子组件或原生DOM上，如果在子组件上，则指向子组件实例，如果在原生DOM上，则指向原生DOM元素（可以用做元素选择，省去querySelector的烦恼）。
传递数据的思路：在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数。代码如下：
//子组件
<template>
<div>{{parentMsg}}</div>
</template>
<script>
export default{
data(){
return {
parentMsg:''
}
},
methods:{
getMsg(msg){
this.parentMsg = msg;
}
}
}
</script>
//父组件
<template>
<div>
<child-comp ref="child"></child-comp>
<button @click="sendMsg">SEND MESSAGE</button>
</div>
</template>
<script>
import childComp from 'path'
export default{
components:{
childComp
},
methods:{
sendMsg(){
this.$refs.child.getMsg('Parent Message');
}
}
}
</scritp>

文章插图

3、provide和inject
官方不推荐在生产环境使用
provide意为提供，当一个组件通过provide提供了一个数据，那么它的子孙组件就可以使用inject接受注入，从而可以使用祖先组件传递过来的数据。代码如下：
//child
<template>
<div>{{appName}}</div>
</template>
<script>
export default{
inject:['appName']
}
</script>
// root
export default{
data(){
return {
appName:'Test'
}
},
provide:['appName']
}