Vue初步认识组件——父子组件

组件什么是组件？组件是Vue.js最强大的特性之一。组件可以扩展HTML元素，封装可重用代码。在高层次上，组件是Vue.js的编译器添加特殊功能的自定义元素。在某些情况下，组件也可以显示为使用is属性扩展的本机HTML元素。还可以分为：结构化HTML带样式CSS带交互（效果）行为信号量存储数据系统组件组件的行为是否可以自定义？Vue中通过设置属性来设置什么样的组件（组件是分类的）：实现基本功能的基本组件（最小的元素）可重用逻辑组件（业务组件）页面组件页面上的一切都是组件：组件的部分注册树已形成-您不必为自定义组件全局注册每个组件。可以通过Vue实例/组件的实例选项components来注册只在其范围内可用的组件：//在html中，使用varChild={template:'

'}varvm=newVue({el:"#app",components:{//Child只会在父组件模板Child中可用}})这种封装也适用于其他可注册的Vue特性，比如指令。组件树页面上的所有内容都是一个组件：形成一个组件树//headcomponentvarAppHead={template:``};//主窗口单元组件varAppMainUnit={template:``}//主窗口组件varAppMain={template:``,components:{AppMainUnit}}//侧边栏单元组件varAppSideUnit={template:``}//侧边栏组件varAppSide={template:``,components:{AppSideUnit}}//根组件varvm=newVue({el:"#app",components:{AppHead,AppMain,AppSide}})组件数据子组件和根组件使用数据的方式不同根组件数据：varvm=newVue({el:"#app",data:{msg:''},components:{MyLi}})调用msg子组件data:varMyLi={//然后Vue会停止运行并在控制台发出警告，告诉你组件中有数据instance必须是一个函数data(){console.log(1);return{counter:0}},template:`{{counter}}`}//根组件varvm=newVue({el:"#app",data:{msg:'123'},components:{MyLi}})输出:000props声明组件实例的范围是隔离的。这意味着不能（也不应该）在子组件的模板中直接引用父组件数据。父组件的数据需要通过prop传递给子组件。varChild={template:`{{message}}{{myMessage}}`,//声明当前组件可以接受一个message属性，如果是驼峰命名，当传递参数小写,props:['message','myMessage']}varvm=newVue({el:'#app',data:{parentMessage:'h'},components:{Child}})在html中使用://父组件赋值给子组件//实时同步PareMessagevalueprops--作为组件内部的初始状态Prop，是单向绑定的：当父组件的属性发生变化时，会传递给子组件，反之则不行。这是为了防止子组件无意中修改父组件的状态，从而避免应用程序的数据流变得难以理解。此外，每次更新父组件时，子组件的所有props都会更新为最新值。这意味着您不应该更改子组件内的道具。如果你这样做，Vue会在控制台中警告你。有两种情况，我们忍不住想修改prop中的数据：Prop作为初始值传入后，子组件想将其作为本地数据使用；Prop作为原始数据传入，由子组件处理其他数据输出。varChild={template:`{{initCounter}}{{childCounter}}