Vue 组件

组件

在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件

组件可分为根组件和可复用性组件

根组件：通过new Vue()创建,通常应用中只有一个
     不建议适用多个根组件
可复用性组件：通过Vue.component(‘组件名称’,{组件选项})来创建
       组件名称遵循自定义组件命名规范:全小写、连字符
       组件选项与new Vue()选项配置基本一致(没有el)

可复用性组件(全局组件,局部组件) 全局组件的定义:  通过 Vue.component 注册的组件，我们称为全局组件，因为它可以在任意范围内使用

				Vue.component("k-div",{
				        template:`<div>
				                        <div>男男女女</div>
				                        <div>vvvvviii</div>
				                    </div>
				                    `,
				            }
				    });

局部组件的定义:  通过components:{'组件名称':{组件选项}}  component需要带s  注意:局部注册的组件只能中当前注册的组件中使用，不能在它的子组件中使用

				Vue.component("k-div",{
				        template:`<div>
				                        <div>男男女女</div>
				                        <div>vvvvviii</div>
				                    </div>
				                    `,
				             component:{
				                 //组件名称：组件选项
				                 'p-p-t':{
				                     template:`<p>我是一个段落标签</p>`
				                 }
				
				            }
				    });

组件中的data  全局组件中的data写为一个方法,而且需要return,返回值为一个对象  根组件中data:{}的写法在这里用会与根组件的data内存空间互通/共享,根组件只有一个,复用组件有很多,会造成数据混乱  写法：data(){return {}}

					 Vue.component("k-div",{
					            template:`<div>哈哈哈哈</div>
					                    <div>笑嘻嘻</div>
					                    `,
					            data(){
					                return{
					                    name:'孩子'
					                }
					            }
					        });

组件传参

普通传参 一、父级给子级传参  1.父级传递,父级调用子组件,使用v-bind绑定属性的方式,通过子组件的属性传入数据  2.子级接收,使用props,来储存数据,props是一个数组

     Vue.component("k-div",{
            template:`<div>哈哈哈哈</div>
                    <div>笑嘻嘻</div>
                    `，
        });

        let a = fn();
        let app = new Vue({
            el:"#app",
            data:{
                par:"儿子"
            }
        });

子级给父级传参
 注意:vue中的数据默认的单向流动,只能父到子直接传递,但是子到父不能直接修改
 原因:因为父级的数据,不一定只是某个子级在使用,或许还有其它的子级在使用那么如果一个子级的内部随意去修改了父级的数据,很容易导致数据混乱
 步骤:
  1.子组件触发自定义事件,$emit()来触发自定义事件
  2.父组件监听自定义事件
  3.触发指定函数,并根据情况赋值

  Vue.component("k-div",{
            data(){
                return{
                    name:"祥子"
                }
            },
            template:`<div>
                        <p>我是老大</p>
                        <p>我是老二</p>
                        <button @click="go">按钮</button>
                    </div>
                    `,
                methods:{
                    go(){
                        this.$emit("helle",this.name);
                    }
                }
        });


        let app = new Vue({
            el:"#app",
            data:{
                name:""
            },
            methods:{
                fn(n){
                    // console.log("哈哈哈，我是子组件监听的函数")
                    // console.log(n)
                    this.name = n;
                }
            }
        })

双向数据绑定
父传子：1.子组件绑定父组件属性
     2.子组件通过props接收使用
    3.model中prop指定属性(被v-model所绑定的属性)
子传父：1.子组件触发自定义事件
    2.model中event指定自定义事件
    3.自动监听,自动回调函数,自动赋值··

  Vue.component("mc-yang",{
             props:["mm","rootmsg"],
             model:{
                 //用来告诉v-model绑定的prop是哪个
                 prop:'rootmsg',
                 //告诉v-model触发神魔事件的时候
                //      自己去修改绑定的值
                 event:'gofather'//封装了监听和回调 以及赋值
             },
             data(){
                 return{
                     name:"子级数据"
                 }
             },
             template:`<div>{{mm}}
                            <button @click="goto">点我</button>
                            <p>我是子组件：{{rootmsg}}</p>
                        </div>`,
            methods:{
                goto(){
                    this.$emit("gofather",this.name);
                }
            },

         })