vue|vue组件传值方式 vue|前端

父组件向子组件传值：
父组件

【vue|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组件

效果