Vue中父组件向子组件传递数据的方法
已收录本篇文章给大家带来了关于vue的相关知识,其中主要总结了几种vue中父子组件传递数据的方法,包括了props & event、ref属性、provide & inject等等内容,具有一定的参考价值,下面一起来看一下,希望对大家有帮助。
【相关推荐:javascript视频教程、vue.js教程】 最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法。 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: 以上就是一个完整的流程,父组件通过props将数据传递给子组件,子组件则触发事件,由父组件监听,并做相应处理。 ref属性可定义在子组件或原生DOM上,如果在子组件上,则指向子组件实例,如果在原生DOM上,则指向原生DOM元素(可以用做元素选择,省去querySelector的烦恼)。 传递数据的思路:在父组件内通过ref获取子组件实例,然后调用子组件方法,并传递相关数据作为参数。代码如下: provide意为提供,当一个组件通过provide提供了一个数据,那么它的子孙组件就可以使用inject接受注入,从而可以使用祖先组件传递过来的数据。代码如下: 【相关推荐:javascript视频教程、vue.js教程】 以上就是Vue中父组件向子组件传递数据的方法的详细内容,更多请关注php中文网其它相关文章!
1.props & event
//子组件
<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
//子组件
<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 官方不推荐在生产环境使用
//child
<template>
<div>{{appName}}</div>
</template>
<script>
export default{
inject:['appName']
}
</script>
// root
export default{
data(){
return {
appName:'Test'
}
},
provide:['appName']
}
声明:本文转载于网络,如有侵犯,请联系545125923@qq.com删除