关于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>

子（孙）组件：

<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>

二、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>

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119328343