组件化
组件本质就是html的扩展。使用组件要把它当成html一样使用
-
只有根组件才能使用el
-
组件化的意义:封装(复用、隐藏逻辑、提高可维护性)、快速开发(搭积木)
-
定义组件
Vue.conponent('see-artice',{})//第一个参数组件名,组件名必须是两个以上的单词。并且用-链接。 第二个参数选项除了el不能用其他选项都可以使用 //组件有一个必有的选项是template,这个选项用于指定当前的视图模板。 //视图节点也必须是单一根节点 //组件可以有自己独立的data选项,但是data不再是一个{},而是一个工厂函数 //props选项:props表示由于接收从父组件作用域传递过来的“自定义属性”,接收之后可以通过this访问,所以props数据在当前组件中可以用在指令中,其他的选项中都可以用。 //父组件可以向子组件传递数据,子组件使用props来接收,可以传递基本数据类型。 Vue.component('qf-button',{ template:` <div> <span>{{100}}</span> <h5 v-text='mes'></v-tex> <span v-text='xxx'></span> </div> `, data:function(){ return{ //return 必须返回一个对象,这个对象就是我们声明式变量 mes:'hhhh' } }, props:{ xxx:{ type : String , required:flase,default:''} } })
-
$emit(’自定义事件名‘,…将要回传给父组件的数据列表):用于触发一个自定义事件,同时向父组件传递数据。
-
组件化的核心是:1.自定义属性props 2.自定义事件 $emit() 3.自定义插槽
-
总结:
- props,是子组件的一个选项,用于接收父组件给我的自定义属性 =>v-bind
- $emit(),是一个vue api ,用于触发父组件给我的自定义事件 (向父组件发数据) v-on
- ,是vue的一个内置组件,可以直接使用, v-slot
注册组件
-
全局注册组件
-
局部注册组件
父子组件通信
- 父组件向子组件传递数据时,我们使用自定义属性,在子组件使用props接收即可
- 自定义属,在子组件中必须使用props接收,否则用不了
- 当子组件需要向父组件传递数据时,我们使用自定义事件,在子组件中使用$emit()触发并回传数据
- ”表单类“:但凡涉及到“父子组件通信”的组件,我们一般称之为“类表单”。v-model可以优化代码
插槽
是vue内置组件
当我们封装自定义组件时,从组件结构的角度来看,某些结构是不确定的,那我们使用占个位置。当这个组件被真正使用时,才能够确定这个位置放什么元素。这就叫插槽。
以后封装组件,哪个地方不确定,就放一个占位。如果有多个地方不确定,就放多个不同的。使用命名插槽,给
- 默认name 叫‘default’
- v-slot是一个指令,用于指定哪个来显示当前元素.他的简写为#
- 可以添加任意自定义属性,在父组件中使用 v-slot来获取数据