组件的基本使用上
1 组件的注册
组件之间可以相互的引用,但有一个前提-----------注册
1.1 注册的两种方式
全局注册和局部注册两种
全局注册:
被全局注册的组件,可以在全局任何一个组件内使用
1.在main.js内导入两个组件
2.调用 app 实例的 component() 方法,再全局注册两个组件,两个参数(' 前面字符串是名称 ',xx)
3.在其他组件中直接以标签的形式就能使用
局部注册:
被局部注册的组件,只能在当前注册的范围内使用
1 如果要在App.vue组件中使用,先在App.vue中导入
2 通过components节点,为当前组件注册私有子组件
components : {
‘ 组件名称 ’ :组件
}
3 通过标签的形式,在当前组件内使用(因为局部注册只能在局部使用)
2 组件之间的样式冲突
3 组件的props
可以简单理解为:组件向组件传递数据,以前是组件向标签传递
为了提高组件的复用性,在封装组件时需要遵守如下原则:
组件中要展示的数据,尽量由组件的使用者提供
WHY?
为了方便使用者为组件提供要使用的数据,vue组件提供了props概念。
props是组件的自定义属性,组件的使用者可以通过props把数据传递到子组件内部,供子组件内部使用。
HOW?
props的作用:父组件通过props向子组件传递要展示的数据
3.2 使用props属性------指的是父组件的子组件标签属性
在封装vue组件时,可以把动态的数据项声明为props自定义属性。自定义属性可以在当前组件中被直接使用。
3.3 动态绑定 props 的值
在父组件标签中,可以通过v-bind属性绑定的形式,为组件动态绑定 props 的值
因为v-biand就是属性绑定指令,在子组件标签内绑定 title 和 author 等属性
这和前面的v-biand属性绑定指令内容串联起来