vue组件

组件是什么

可复用的 Vue 实例, 封装 标签 样式 js代码

组件好处

各自独立,便于复用

组件基本使用

全局注册

1. 创建组件 - 文件名.vue

2. 引入组件 import 变量名 from ’ 文件路径 ’

3. 全局 - 注册组件 Vue.component(’ 组件名 ’ , 组件对象) 前三步是在main.js

4. 使用组件 - 组件名当作标签使用 (在App.vue template里写)

局部注册

1. 创建组件 - 文件名.vue

2. 引入组件 import 变量名 from ’ 文件路径 ’

3. 局部 - 注册组件
   export default{
   components: {
   组件名:组件对象
   },
   }
   4.使用组件 - 组件名当作标签使用 (在App.vue template里写)

组件通讯 父向子 props

子组件中使用props,定义变量,接收父组件传递过来的值,然后使用变量

父组件(App.vue)内,要展示封装的子组件,把属性传递数据

注意事项 - 单向数据流

父组件传递给子组件的数据,只能由父组件修改,props的数据都是只读的

子组件修改父组件的值,父组件不会更新数据

子传父流程

1.在父组件中给子组件绑定自定义事件

2.在子组件中恰当的时机触发事件并传递数据

3.使用 $emit 触发事件并传递数据到父组件