1.组件_概念
组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
组件的好处:各自独立, 互不影响
2.组件_基础使用
1.创建组件 components/xxx.vue
2.注册组件: 创建后需要注册后再使用
全局注册
全局入口在main.js, 在new Vue之上注册
语法:
import Vue from 'vue' import 组件对象 from 'vue文件路径' Vue.component("组件名", 组件对象)
全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template里用
局部注册
语法:
import 组件对象 from 'vue文件路径' export default { components: { "组件名": 组件对象 } }
任意vue文件中中引入, 注册, 使用
组件使用总结:
-
(创建)封装html+css+vue到独立的.vue文件中
-
(引入注册)组件文件 => 得到组件配置对象
-
(使用)当前页面当做标签使用
3.组件-scoped作用
解决多个组件样式名相同, 冲突问题
原理与过程:会自动给标签添加data-v-hash值属性, 所有选择都带属性选择
4.组件通信-父向子-props
从一个vue组件里把值传给另一个vue组件(父->子)
父传子步骤:
1.子组件内, props定义变量, 在子组件使用变量
2.父组件内, 使用子组件, 属性方式给props变量传值
5.组件通信_单向数据流
在vue中需要遵循单向数据流原则
-
父组件的数据发生了改变,子组件会自动跟着变
-
子组件不能直接修改父组件传递过来的props props是只读的
==父组件传给子组件的是一个对象,子组件修改对象的属性,是不会报错的,对象是引用类型, 互相更新==
总结: props的值不能重新赋值, 对象引用关系属性值改变, 互相影响
props变量本身是只读不能重新赋值
6.组件通信-子向父
语法:
-
父: @自定义事件名="父methods函数"
-
子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码