父子祖孙组件通信

1. 可以使用vue serve和vue build命令对单个*.vue文件进行快速原型开发，但需要安装一个全局的扩展：
   npm install -g @vue/cli-service-global
2. 支持.vue后缀文件（快速原型开发）
   开发环境下：vue serve App.vue
   生产环境下：vue build App.vue
3. 组件的通信
   入口文件：

<template>
    <div>
        <Parent></Parent>
    </div>
</template>
<style scoped>

</style>
<script>
import Parent from './components/Parent';
    export default{
        data(){
            return {

            }
        },
        components:{
            Parent
        }
    }
</script>

components文件夹中建了三个vue 文件:Parent.vue
Son.vue、grandSon.vue
(1)父子通信 props $emit
Parent.vue：

<template>
    <div>
        parent
        <!-- 父组件监听子组件的事件，并给事件绑定函数 -->
        <Son :m="money" @change="fn"></Son>
    </div>
</template>
<script>
import Son from './Son';
    export default{
        data(){
            return {
                // money:"ABC"
                money:500
            }
        },
        components:{
            Son
        },
        methods:{
            fn(data){
                this.money=data;
            }
        }
    }
</script>

Son.vue：

<template>
    <div>
        son
        {{m}}
        {{a}}
        {{o}}
        <button @click="give">给父组件</button>
        <!-- {{changeM}} -->
    </div>
</template>
<script>
    export default{
        props:{
            m:{
                type:[String,Number],
                required:true,
                validator:(value)=>{ //自定义验证规则
                    return value>400&value<2000
                }
            },
            //数组或者对象默认值是函数
            a:{
                type:Array,
                default:()=>[1]
            },
            o:{
                type:Object,
                default:()=>({})
            }
        },
        methods:{
            give(){
                //子组件执行父组件监听的事件
                this.$emit('change',1000);
            }
        }
        // props:['m'],
        // computed:{
        //    changeM(){
        //        return this.m.trim().toLowerCase()
        //    }
        // }
    }
</script>

(2)语法糖的写法:
Parent.vue

Son.vue

(3)v-model
Parent.vue

Son.vue

4. 父组件批量传给子组件：$attrs——>如果继续向下传的话使用v-bind，子组件不需要使用props.
   
   而子组件直接接收即可。
   
   运行的结果以对象的形式展现：
   

传给grandson:
Son.vue:

引入：

注册组件：

GrandSon.vue:

运行的结果如下：

5. 传递事件，使用$listeners，继续向下传时使用v-on
   
   Son.vue
   
   传给grandson时，
   Son.vue如下：
   
   grandson中：
   
6. provide & inject
   Parent.vue:
   
   grandson中
   
7. $parent & $children
   拿到父子组件的方法：
   

（2）或者使用ref

8. eventBus 兄弟之间传递数据 $on $emit

Vue.prototype.$bus=new Vue;
this.$bus.$on('test',function(data){console.log(data)});
this.$bus.$emit('test',1000)