Vue 的父子组件通信

父子传值

简单来说父向子传值，用自定义属性，子向父传值用自定义方法

<!-- HTML -->
	<div id="app">
      <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
      <menu-item :parr="parr" @elg-text="handle($event)"></menu-item>
    </div>

@elg-text 这是自定义方法，:parr=“parr” 这是自定义属性

// JavaScript
   Vue.component('menu-item', {
     props: ['parr'],
     template: `
    <div>
      <ul>
        <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
      </ul>
      <button @click='parr.push("123")'>123</button>
      <button @click='$emit("elg-text",10)'>扩大父组件字体</button>
      <button @click='$emit("elg-text")'>扩大父组件字体</button>
    </div>
   `,
   })

   var app = new Vue({
     el: '#app',
     data: {
       msg: 'heheheheheheheeheh',
       parr: ['banana', 'apple'],
       fontSize: 10,
     },
     methods: {
       handle: function (val) {
         this.fontSize += val
       },
     },
   })

1. 子组件通过 props 接收父组件传递的自定义属性的值，可以在子组件使用 props 值，但不能改变值
2. 子组件通过 $emit监听父组件的自定义事件，第一个参数是父组件自定义方法的方法名，第二个是参数是向父传的值
3. 在父组件中 $event 是接收过来的子组件传递的值，子组件事件绑定触发父组件中的自定义方法