之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客
一、父传子（prop）
第一步：在父组件中定义数据，例：tohome
data () {
return {
tohome:"给home组件传值",
}
},第二步：在<v-home>上绑定个属性，例:title
<v-home :title="tohome"></v-home>第三步：子组件利用props接收父组件的传值
方法一 props:{
'title':String,
'bool':Boolean,
'getFun':Function
},
方法二 props:['title','bool','getFun','parent']第四步：在子组件上绑定传过来的数据
<p>{
{title}}</p>二、子传父（$meit）
子组件
<template>
<div>
<span>我是子组件</span>
<button @click="btnClick">点击后给父组件传参</button>
</div>
</template>
<script>
export default {
data(){
return {
aa:'我是子组件上的信息'
}
},
methods:{
btnClick(){
this.$emit('itemfun',this.aa)
}
}
}
</script>父组件
<template>
<div>
<span>我是父组件</span>
<v-home @itemfun='getapp'></v-home>
<span>{
{data}}</span>
</div>
</template>
<script>
import home from '../../home'
export default {
components:{
'v-home':home
},
data(){
return {
data:''
}
},
methods:{
// 获取子组件填写好的值
getapp(val){
this.data=val
}
}
}
</script>注:如果子组件没有点击事件给父组件传参，可以使用watch监听
子组件
<template>
<div>
<span>我是子组件</span>
</div>
</template>
<script>
export default {
data(){
return {
aa:''
}
},
// 监听父组件有没有获取到值
watch: {
aa: {
handler (n, o) {
this.$emit('itemfun', n);
},
deep: true
}
},
mounted(){
this.aa="我是子组件上的信息"
},
}
</script>父组件的内容和上面一样
三、$refs
在父组件使用this.$refs可以获取到子组件的所有方法和数据
//子组件
<template>
<div>
<span>我是子组件</span>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
//父组件
<template>
<div>
<span>我是父组件</span>
<v-home ref="refHome"></v-home>
</div>
</template>
<script>
import home from '../../home'
export default {
components:{
'v-home':home
},
data(){
return {
data:''
}
},
mounted(){
console.log(this.$refs) //在父组件输出,可以直接获取home组件的所有数据和方法
}
}
</script>运行结果
四、$parent / $children
注：this就指向Vue实例，所以，this.$parent就是这个页面的父组件；同样的this.$children就是这个页面的子组件；
所以，如果当前在父组件，可以通过this.$children访问子组件的所有数据和方法；如果当前在子组件，可以通过this.$parent访问父组件的所有数据和方法；
如果在子组件1想访问子组件2的所有方法和数据，可以通过this.$parent.$refs也可以通过this.$parent.$children
其实还有很多方法，例如作用域插槽等。可以参考这个文章