vue组件传值方式

父组件向子组件传值：

父组件

子组件

效果

子组件向父组件传值：

子组件

父组件

效果

兄弟组件传值(非父子组件)：

在main.js中创建一个公共的vue实例

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 1.兄弟组件传值，需要创建一个公共的vue实例，在Vue的原型上创建一个属性bus，该属性的值为new Vue（），即bus也是一个vue实例
// 也可以新建一个js文件，兄弟两个组件分别引入这个js，
Vue.prototype.bus = new Vue() 

new Vue({
  render: h => h(App),
}).$mount('#app')

两个组件都需要在父组件中注册

兄弟A组件

兄弟B组件

效果

兄弟组件传值也可以用vuex状态管理，这里就不做讲解了

以上是vue2组件传值方式，vue3的也在努力编写中