高级前端-Vue组件世界

1. 自定义指令

2. 数据双向绑定::value + @input

v-model作用于表单元素

自定义组件使用v-model之后,父组件不用再监听子组件的事件触发

.sync语法糖

高级前端-Vue组件世界_第1张图片

高级前端-Vue组件世界_第2张图片

3. 组件通信

高级前端-Vue组件世界_第3张图片

1. 跨层级访问:$emit,组件过多时会很麻烦,vue提供了$root和$parent两个属性(强耦合),访问组件根节点和父节点,父组件通过ref访问子组件

2. 依赖注入:父组件provide对应属性,子组件通过injected去使用provide提供的数据,injected的内部通过$parent往父节点找对应的属性,所以依然还是强耦合

高级前端-Vue组件世界_第4张图片

3. 组件二次封装:修改第三方库样式的时候,使用>>>,就可以了,不用再单独开一个style

这是一个对element input的组件的二次封装,vue提供了$attrs和$listeners,方便开发二次封装,这样就不用单独去实现自定义组件的v-model,还有el-input对应的各个方法

高级前端-Vue组件世界_第5张图片

高级前端-Vue组件世界_第6张图片

4. vue插件

Mixins: 生命周期钩子函数在组件的钩子函数之前执行,methods如果有重名的,使用组件中的method

高级前端-Vue组件世界_第7张图片

插件:Vue.use(plugin)

高级前端-Vue组件世界_第8张图片

5. vue代码的复用方案:

1. Mixin

2. HOC Hihger order component 函数接收组件作为参数,并返回一个新的组件

高级前端-Vue组件世界_第9张图片

3. RenderLess组件

// 带插槽的父组件 SearchWrapper.vue


// 子组件中使用父组件的数据

         // 这里的scopeData.data指向父组件的:data,也就是advanced

高级前端-Vue组件世界_第10张图片

你可能感兴趣的:(高级前端,vue,javascript,高级前端)