vue组件传值方式

父组件向子组件传值:

父组件




子组件




效果
vue组件传值方式_第1张图片

子组件向父组件传值:

子组件





父组件




效果
vue组件传值方式_第2张图片

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

在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组件




效果
vue组件传值方式_第3张图片
兄弟组件传值也可以用vuex状态管理,这里就不做讲解了

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

你可能感兴趣的