Vue组件间的传值

Vue组件间的传值

父组件向子组件传参

• 子组件通过组件内部props接收传递过来的值

  Vue.component('menu-item', {
      props: ['title'],
      template: '<div>{{title}}</div>'
  })
  

• 父组件通过属性将值传递给子组件

  <menu-item title="父组件要传的参数"></menu-item>
  <menu-item :title="title"></menu-item>
  

• 注意props属性的命名规则，html不区分大小写

子组件向父组件传参

• 子组件通过自定义事件向父组件传参

  <button @click="this.$emit(‘enlarge-text’)">扩大字体</button>
  

• 父组件监听子组件的时间

  <menu-item @enlarge-text="fonsize += 0.1"></menu-item>
  

• 携带参数

  • 子组件

    <button @click="this.$emit("enlarge-text", 0.1)">扩大字体</button>
    

  • 父组件

    <menu-item @enlarge-text="fonsize += $event"></menu-item>
    

兄弟组件的通信

• 通过父组件传递——子1-> 父->子2（props + $emit）
  • 子组件1通过触发事件传参——this.$emit(‘ChildOneClick’, ‘要传的参数’)
  • 父组件监听该事件——@ChildOneClick = “handleParentClick”，在方法中接收参数handleParentClick(‘接收的参数’)，然后通过绑定属性将参数传递个子组件2
  • 子组件2通过props 接收该参数
• 通过eventBus（Vue对象的实例）
  • 子组件1触发事件——eventBus.$emit(‘ChildOneClick’, ‘要传的参数’)
  • 子组件2监听事件——eventBus.$emit(‘ChildOneClick’, (‘接收的参数’) => {})
• 通过Vuex管理（略）

Vuex实现全局状态管理

Vuex的使用