Vue 组件间的数据交换

父组件向子组件传值
1.组件内部通过props接收传递过来的参数

 Vue.component('menu-item', {
        props: ['title'],
        data: function() {
            return {
                msg: '子组件的数据'
            }
        },
        template: `<div>{{title}}</div>`
    })

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

   <!-- 静态 -->
        <menu-item title="来自父组件的数据" keys='hello Vue' com-timi='巨鸟多多'></menu-item>
        <!-- 动态 -->
        <menu-item :title='ftitle' :keys='fkeys' :com-timi='timi'></menu-item>

         var v = new Vue({
        el: '#app',
        data: {
            fmsg: '父组件的数据',
            ftitle: '父组件的数据',
            fkeys: '你好！Vue',
            timi: '天美'

        }

子组件向父组件传值

*props传递数据原则：单向数据流 *

1.子组件通过自定义事件的方式向父组件传递信息
// @click=’$emit(“自定义事件名称”)’

 Vue.component('menu-son', {
        props: ['ary'],
        data: function() {
            return {

            }
        },
        template: `
        <div>
        <button @click='$emit("text-e")'>扩大字体</button>
        </div>
        `
         // @click='$emit("自定义事件名称")'

2.父组件监听子组件的事件

<menu-son @text-e='fn'></menu-son>