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

Question

如题所述

Answer 1

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
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=sendMsgSEND 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]
}
4、vuex
vue官方推荐的全局状态管理插件。