vue 父子组件传值的方法

一、父传子

1、Prop 向子组件传递数据

//子组件
Vue.component('Child', {
  props: ['title'],
  template: '<h3>{
  { title }}</h3>'
})

//父组件调用
<Child title="My journey with Vue"></Child>

 2、$emit监听子组件事件

//子组件
<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

//父组件调用
<Child
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></Child>

<floatmenu @fatherMethod="tabClick"
           :menuList.sync="menuList"
           ref="float"></floatmenu>

this.$emit('update:menuList', _this.menuList)

props: {
    menuList: Object,
},

methods: {
    tabclick(id, el, index) {
      this.$emit('fatherMethod', id, el, index)
    }
},

 二、插槽  prop将插槽转换为可复用的模板，通过prop进行传值

// 公共模板
<div