您当前的位置：首页 > 前端 > vue > vue父子组件间的相互访问方式
vue父子组件间的相互访问方式
日期：2021-08-06 14:12:24 浏览：267
假如我们需要从子组件,去调用父组件的方法,或者数据(数据可以修改)
子组件访问父组件的方法,数据
我们在父组件定义一个方法
export default {
name: "App",
data(){
return {
title:'父传递到子页面',
articles:[
'1111111111',
'2222222222',
'3333333333'
]
}
},
methods:{
//这里定义方法
appOne(p){
console.log('this is a APP' + p)
}
},
components:{
MyHeader,
MySection,
MyAside,
MyFooter
}
}然后子组件去调用父组件的方法
export default {
name: "MyAside",
components:{
MyList
},
methods:{
one(){
//用this.$parent.appOne("1111"),调用父组件的方法
//也可以用this.$root.直接调用根节点的方法
this.$parent.appOne("1111")
console.log(this.$parent.articles); //访问父组件的数据,当然也可以修改父组件的数据
}
}
}
父组件访问子组件的方法及数据
//我们在子组件定义一个one()方法,用来被父组件访问
export default {
name: "MyHeader",
props:['msg','title'],
methods:{
one(){
return "我是子组件里面的方法"
}
}
}父组件
<template>
<header>
//这里定义一个one,two用来区别是哪个组件
<MyHeader ref="one" msg="this is msg" :title="title" ></MyHeader>
<MyHeader ref="two" msg="this is msg" :title="title" ></MyHeader>
<button @click="childOne">调用子组件方法</button>
</header>
<main>
<section>
<MySection :articles="articles"></MySection>
</section>
<aside>
<MyAside></MyAside>
</aside>
</main>
<footer>
<my-footer ></my-footer>
</footer>
</template>
<script>
import MyHeader from "@/components/MyHeader";
import MySection from "@/components/MySection";
import MyAside from "@/components/MyAside";
import MyFooter from "@/components/MyFooter";
export default {
name: "App",
data(){
return {
title:'父传递到子页面',
articles:[
'1111111111',
'2222222222',
'3333333333'
]
}
},
methods:{
appOne(p){
console.log('this is a APP' + p)
},
childOne(){
//this.$refs['']里面写需要访问哪个子组件的别名
//通过 this.$refs['one'].one(),访问子组件one方法
//也可以 this.$refs.one.one();
console.log(this.$refs['one'].one())
}
},
components:{
MyHeader,
MySection,
MyAside,
MyFooter
}
}
</script>
上一篇: vue父子组件间的相互通信
下一篇: php缓冲区操作
世事无常
要有遥不可及的梦想,也要有脚踏实地的本事
