vue 组件

组件是可以复用的Vue实例，所以其与new Vue 接收相同的选项

组件的data必须是一个函数，确保每个实例可以维护一份被返回对象的独立的拷贝，也就是任何一个组件的改变不会影响到其他组件

组件注册

一、全局注册

1、将组件内容设置好，2、通过Vue.component(‘组件名’，组件内容) 注册全局组件。注册好后可以使用在任何新创建的Vue根组件的模板中。

<div id="app">
        <!-- 使用 -->
        <my-a></my-a>
 
    </div>
<script>
        //组件为对象，组件data必须返回一个工厂函数
        //方法一
      let myA={
        template:`
        <div>
            {{masA}}
        </div>
        `,
        data(){
            return{
                masA:'dsdsds'
            }  
        }
      }
      //全局注册
    Vue.component('my-a',myA)
     //设置根节点
       new Vue({
			el:"#app",
			data:{
				
			},
			methods:{}
		})

2、局部注册

1、设置组件内容，2、通过components 在你需要局部调用的组件位置中注册局部组件。只能使用在注册组件的内部

let myB={
//局部注册
    components:{
        'my-a':myA
    },
        template:`
        <div>
            {{masb}}
            <my-a></my-a>
        </div>
        `,
        data(){
            return{
                masb:'ddsddsds'
            }  
        }
    }

组件的通信：

父传子：将父组件的内容传递到子组件中（建议动态绑定，静态绑定传进去就是个字符串）

1.在子组件内绑定参数  2.子组件接受并处理  

子传父：

1.在子组件内部使用$emit发射自定义事件和传递给父组件得值
 2.在父组件内声明自定义事件接受参数

<div id="box">
        <!-- 2.给父组件创建一个自定义事件绑定handleEvent -->
        <navbar @myevent="handleEvent"></navbar>
        <sidabar v-show="isShow"></sidabar>
    </div>

    <script>
         Vue.component("navbar",{
            template:`
            <div style="background-color:red;">
                <button @click="handClick">点击</button>
            </div>
            `,
            methods: {
                handClick(){
                    //1.$emit触发事件,点击以后将事件给父组件传递
                 this.$emit("myevent")
                }
            },
         })
        Vue.component("sidabar",{
            template:`
             <div style="background:yellow;">
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
             <li>6</li>
             <li>7</li>
             </div>
            `
        })

        new Vue({
            el:"#box",
            data:{
                 isShow:true
            },
            methods:{
                //3.运行显示或隐藏
                handleEvent(){
                    this.isShow=!this.isShow
                }
            }
        })
    </script>

兄弟：

1.定义一个事件总线 new Vue();
    2.引入事件总线 使用事件总线Bus.$emit(事件名称,发送的数据)
    3.引入事件总线 使用事件总线Bus.$on(事件名称,(a)=>{
        a--->数据
    })

祖先、子孙：

1.使用provide(){
        return {
            传递的数据
            "属性名":属性值/this.msg
        }
    }
    2.inject注入传递的数据
    inject:['属性',"属性"]