vue中父子组件传递数据的方法有哪一些
导读:在这篇文章中我们会学习到关于“vue中父子组件传递数据的方法有哪一些”的知识,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。...
在这篇文章中我们会学习到关于“vue中父子组件传递数据的方法有哪一些”的知识,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。
最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法。
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']
}
现在大家对于vue中父子组件传递数据的方法有哪一些的内容应该都清楚了吧,希望大家阅读完这篇文章能有所收获。最后,想要了解更多vue中父子组件传递数据的方法有哪一些的知识,欢迎关注网络,网络将为大家推送更多相关知识的文章。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: vue中父子组件传递数据的方法有哪一些
本文地址: https://pptw.com/jishu/652422.html