关于Vue的几个实用知识点（持续更新中……）
前言
排名不分先后，按自己习惯来的。 一、provide、inject 高级组件
总述： provide在父组件中定义，inject 在子孙组件中定义。 provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。 inject ：通常是一个字符串数组。
作用： provide、inject实现父子（孙）传值。
示例： 父组件：
<template>
<div>
<Child></Child>
</div>
</template>
<script>import Child from '../components/child'
export default {
name: 'parent',
components: {
Child
},
provide: {
name: '父组件'
}
}
</script>
<style scoped>
</style>
123456789101112131415161718192021子（孙）组件：
<template>
<div>
<button @click="cli">按钮</button>
</div>
</template>
<script>
export default {
name: 'child',
inject: ['name'],
methods: {
cli () {
console.log(this.name)
}
}
}
</script>
<style scoped>
</style>
123456789101112131415161718192021二、Bus实现同级传值
总述： 首先建立一个名为Bus.js的文件，这个文件起到中转站的作用。
// Bus.js import Vue from ‘vue’ export default new Vue()
将文件放到src文件夹下的assets文件夹下（个人喜好，我直接放到components文件夹下了，不过不推荐）。
作用： 实现同级传值。
示例：
父组件：
<template>
<div>
<Child></Child>
<Childtwo></Childtwo>
</div>
</template>
<script>import Child from '../components/child'
import Childtwo from '../components/childtwo'
export default {
name: 'parent',
components: {
Child,
Childtwo
}
}
</script>
<style scoped>
</style>
123456789101112131415161718192021更多内容请见原文，原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119328343
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
