1、两个不同的父组件parentA、parentB引用同一个子组件child
例子:child.vue
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default {
created() {
console.log(this.$parent);
},
};
</script>
父组件A
<template>
<div>
<h1>我是父组件A</h1>
<Child />
</div>
</template>
<script>
import Child from '@/components/Children-view.vue';
export default {
components: {
Child,
},
data() {
return {
msg: '父组件A的msg',
title: '父组件A的title',
};
},
};
</script>
父组件B
<template>
<div>
<h1>我是父组件B</h1>
<Child/>
</div>
</template>
<script>
import Child from '@/components/child.vue'
export default {
components: {
Child
},
data() {
return {
msg: '父组件B的msg'
}
}
}
</script>
结果
通过结果可以了解到当通过路由调动时,子组件的$parent.msg就会指向该父组件的msg属性
当同时调用父组件的title属性时
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default {
created() {
console.log(this.$parent.title);
},
};
</script>
结果是有title属性的父组件会打印title属性,但没有title属性的父组件会打印undefined看下图
上图分别是父组件A和父组件B的打印,由此可以得出在子组件打印父组件未定义属性时并不会报错,而是打印undefined
当调用父组件方法时GetData()
子组件
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default {
created() {
this.$parent.GetData();
},
};
</script>
父组件A
<template>
<div>
<h1>我是父组件A</h1>
<Child />
</div>
</template>
<script>
import Child from '@/components/Children-view.vue';
export default {
components: {
Child,
},
data() {
return {
msg: '父组件A的msg',
title: '父组件A的title',
};
},
methods: {
GetData() {
console.log('父组件A的方法');
},
},
};
</script>
父组件B
<template>
<div>
<h1>我是父组件B</h1>
<Child />
</div>
</template>
<script>
import Child from '@/components/Children-view.vue';
export default {
components: {
Child,
},
data() {
return {
msg: '父组件B的msg',
};
},
methods: {
GetData() {
console.log('父组件B的方法');
},
},
};
</script>
结果:
两个组件之间并不影响
如果父组件没有GetData()方法则会报错请看下图
以上就是$parent的总结,感谢观看!!!