组件是什么
可复用的 Vue 实例, 封装 标签 样式 js代码
组件好处
各自独立,便于复用
组件基本使用
全局注册
-
创建组件 - 文件名.vue
-
引入组件 import 变量名 from ’ 文件路径 ’
-
全局
- 注册组件 Vue.component(’ 组件名 ’ , 组件对象) 前三步是在main.js -
使用组件 - 组件名当作标签使用 (在App.vue template里写)
局部注册
-
创建组件 - 文件名.vue
-
引入组件 import 变量名 from ’ 文件路径 ’
-
局部 - 注册组件
export default{
components: {
组件名:组件对象
},
}
4.使用组件 - 组件名当作标签使用 (在App.vue template里写)
组件通讯 父向子 props
子组件中使用props,定义变量,接收父组件传递过来的值,然后使用变量
父组件(App.vue)内,要展示封装的子组件,把属性传递数据
注意事项 - 单向数据流
父组件传递给子组件的数据,只能由父组件修改,props的数据都是只读的
子组件修改父组件的值,父组件不会更新数据