03-Vue组件机制
1.概述(1)组件可以扩展HTML元素，并在内部封装可重用的HTML、CSS和JS代码片段。(2)因为组件是可重用的Vue实例，所以它们接收与新Vue相同的选项，例如data、computed、watch、methods和lifecyclehooks。唯一的例外是特定于根实例的选项，例如el。(3)组件类似于vue实例，组件内部有一个template属性，用于指定模板。vue实例内部有一个el属性，用来指定模板。2.组件的特点(1)组件可以被任意多次复用(2)组件的数据必须是一个函数，保证每个实例都能维护一个独立的返回对象副本，即变化任何组件的任何其他组件不受影响。3.组件定义letcomponent={data(){return{//返回对象值的唯一副本，保证复用的组件内部数据不会相互影响msg:"我是组件的数据"}},template:`
`}4.组件注册（1）全局注册的组件可以在任何vue实例或组件内部使用（2）本地注册的组件只能在当前注册的实例或组件内部使用（3）类似于js中的全局变量，局部变量1、全局注册Vue.component('my-com',component);如果一个组件被多个其他组件调用，最好使用全局注册。2.局部注册如果一个组件在一个实例或组件内被多次调用，最好使用局部注册。newVue({el:"#app",data:{},components:{"my-com":component}})5.组件交互（通信）（1）父组件向子组件传递参数父组件使用props将参数传递给子组件的属性。
没有动态参数传递：传递的常量字符串是：传递boolean，number,object,array,variable子组件接收参数letcomponent={props:["title","msg"]}propsvalidationletcomponent={props:{title:{type:String,//validationdatatyperequired:true,//这个参数必须传递的参数//基本数据类型直接写在defaultdefault:"Hello",//当前参数的默认值//引用数据类型，返回一个对象或者数组以工厂函数的形式default(){return{}}validator(val){//自定义验证器returnval.lenth>3;}}}}（2）子组件向父组件传递参数
letcomponent={data(){return{comMsg:"Iamsubcomponentdata"}},template:`
发送事件
`,方法：{clickHandler(){clickHandler(){this.$emit("son-handler",this.comMsg)}}}}newVue({el:'#app',data:{fatherDate:''},methods:{fatherHandler(val){//val是参数this.comMsgthis.fatherDate=val}},components:{myCom:component}})(3)单向数据流parentprop数据的更新会向下流到子组件。反之，父组件可以修改子组件中的数据，但子组件不能直接修改父组件中的数据。作用：防止子组件不小心改变状态，影响父状态或组件中的数据6.slot(1)普通slot
hellovueletcom={template:`
//defaultslot
`}(2)Namedslot
我是header内容Hellocomponentslot
我是页脚内容letcom={template:`
//命名插槽//匿名插槽
`}(3)作用域插槽
{{scope.msg}}//scope是一个scope对象，内部封装了子组件传递过来的msg数据，可以使用该对象进行解构。我是页眉内容Hellocomponentslot
我是页脚内容letcom={data(){return{msg:"我是组件数据"}},template:`
`}7。动态组件（1）静态组件
（2）动态组件（3）动态渲染组件默认情况下，组件会在组件切换时被重新创建，但有时我们希望组件实例在第一次创建时被缓存。为了解决这个问题，我们可以使用一个元素来包裹它的动态组件。<保持活动>
