06、component组件
组件基础
组件是可以复用的Vue模块，是一个独立的，有自己的视图、样式CSS、ViewMoel业务逻辑结构的完整模块。当成自定义元素，可以在任意Vue中、模板、其他组件中使用。一个复杂的页面、系统可以拆分为多个组件，独立开发和维护，可复用、更清晰。
🔸注册组件：Vue.**component**( id, [definition] )注册全局组件，id为组件的名，也作为元素名；参数和Vue参数选项对象基本一致。
**data**必须是函数：通过函数返回对象，避免不同组件实例共享data数据。**template**模板，字符串模板，或者选择器，不能用真实Dom元素。- 必须有根元素：组件的模板必须有一个有效的根元素。
🔸props 参数：通过
**props**定义参数（Array| Object ），参数都会作为组件元素的 attribute特性使用，通过vm.$props获取组件参数。
🔸自定义事件：在子组件中，申明并触发自定义事件$emit( event-name, […args] )，通过vm.$listeners获取组件的所有监听事件。（emit /iˈmɪt/ 发射，发出 ）- 响应事件（父组件）：
**v-on:**event-name，这里的处理函数建议只绑定函数名，便于接收参数。 - 修饰符
.native监测组件根元素的原生事件，v-on:change.native="func" - 绑定事件监听器，在组件内特定元素上绑定所有监听事件：
v-on="$listeners"，vm.$listeners可获取组件上的所有监听事件。
🔸
插槽 ，在组件中设定一个插槽，来接收组件元素的标签内的内容，通过vm.$slots获取组件的插槽。<div id="app9"> <user-info v-for="(u,i) in users" v-bind:u="u" type="钻石会员" v-on:remove="users.splice(i,1)"></user-info> </div> <script> // 注册一个全局组件 Vue.component("user-info", { data: function () { return { count: 0 }}, //组件的data必须是函数返回对象 props: ['u', 'type'], template: `<div class="user-info"> <span>{{u.name}}</span> 📅<input v-model.number="u.age" type="number"> <i>{{type}}</i> <span>“{{u.summary}}”</span> <button v-on:click="$emit('remove')">删除</button> </div>` //通过模板字符的方式实现多行文本，IE是不支持的。 }); // 正式应用 let app9 = new Vue({ el: "#app9", data: {users: [ { name: "张三", age: 14, summary: "垂死病中惊坐起，赶快下楼做核酸" }, { name: "李四", age: 30, summary: "仰天大笑出门去，下楼排队做核酸" }] } }) </script>
📢注意组件命名：
小写+连字符（kebab-case），包括组件名称（作为自定元素标签）、组件参数prop（作为自定义元素的 attribute），以及自定义事件名。- 小写遵循W3C规范，连字符避免和HTML冲突（包括以后新的HTML标签名）。
- HTML 中的 attribute 名是大小写不敏感的，浏览器会把所有大写字符解释为小写字符。
⚠️ 如果使用字符模板，就不归浏览器管了，就不会命名的限制问题了！
注册组件
- 全局注册：
Vue.**component**( id, {选项})，全局组件，任何地方都可以使用。 - 局部注册：
components：{id:{组件选型}}选项注册组件，只能在当前注册的Vue环境内使用，不可继承。 - 扩展Vue类：
Vue.**extend**({选项})，创建一个Vue的扩展类，通过new()创建组件实例，也是一种组件复用方式。 ```html<div> <sexbox v-bind:data="uinfo" age="99" required>性别（{{uinfo.sex}}）：</sexbox> <user-box :data="uinfo"></user-box> </div>姓名：性别：
 <a name="bB7P9"></a> ## is 动态组件 通过`**is**`特性设置（或`v-bind:is`绑定）组件名称，动态的申明一个组件。<br />组件使用申明方式： - `**<user-info></user-info>**`：自定义元素方式申明。 - `**<component is="user-info"></component>**`：component组件元素申明，通过`is`设置组件名称。 - `**<tr is="user-info"></tr>**`：其他HTML元素+`is `申明组件，该元素会被组件内容替换掉。这主要是为了解决有些HTML元素中只能包含特定的子元素，如<ul>、<table>。 ```html <keep-alive> <component is="user-info" v-bind:u="users[0]"></component> </keep-alive> <table> <tr is="user-info" v-bind:u="users[0]"></tr> </table>🔸缓存组件：用
<[keep-alive](https://v2.cn.vuejs.org/v2/api/?#keep-alive)>包裹动态组件，配合组件特性is使用，用来缓存失活的动态组件，避免组件失活后状态丢失。Props参数
通过
**props**定义参数（Array| Object ），参数都会作为组件元素的 attribute特性使用，通过vm.$props获取组件参数。
🔸Prop对象验证：除了使用数组设置多个参数，还可以用一个对象来申明多个参数及参数规则，用于参数合法性验证。注意验证的执行是在组件实例创建之前进行的，此时data、computed都还不可用。- 每个参数可以指定多个验证类型。
每个参数可以定义类型
type、必填require、默认值default，以及验证器函数validator。<div id="app11"> <sex-box v-bind:data="uinfo" age="99" required class="form-item">性别：</sex-box> </div> <script> function User(name = "", sex = "") { this.name = name; this.sex = sex; } // 一个性别选择组件 let sexBox = { data: function () { return { dic: { male: '男', female: "女", other: '其他' }, utype: this.type, //使用prop参数为初始值 } }, inheritAttrs: false, //组件根元素不继承Attribute（不含style、class） props: { data: [Object, User], //User为自定义构造器 type: String, age: { type: [String, Number], required: true, default: 18, validator: function (value) { return value > 0 && value < 100 } /* 自定义验证器 */ } }, // props: ['data', 'type', 'age'], template: `<div><slot></slot> <label v-for="(value,name) in dic"> <input type="radio" v-model="data.sex" name="sex" :value="name" v-bind="$attrs"> {{value}}</label></div>`, } let app11 = new Vue({ el: "#app11", data: {uinfo: new User("张三", 'male')}, components: {'sex-box': sexBox,} }) </script>
🔸参数绑定：参数作为自定义组件元素的attribute使用，推荐v-bind:prop绑定赋值，除是非字符串值，绑定是支持表达式的。如果要传入一个对象的所有 property，直接
v-bind="obj"即可。
🔸参数的单向传递：参数的值是单向的向下传递的，子组件不可更改。
- 父组件的数据变更会触发子组件所有参数prop的刷新。
- 如果传入的是一个引用类型（数组、对象），这个是共享的，会影响父组件状态。
🔸非Props参数的Attribute：对于非Prop参数的Attribute，默认会都应用到组件根元素上。
- 替换：除了class、style会合并，其他如果冲突会替换掉组件内部的
Attribute。 **inheritAttrs**不继承：可在组件选项里设置inheritAttrs:false取消根元素的Attribute继承。- 主动继承：组件内部元素可以用
v-bind="$attrs"，来主动继承非Prop的Attribute特性（不含class、style）。
#slot插槽
插槽可以用来插入任何内容，包括文本、HTML、其他组件。结合具名插槽（name)、prop绑定，可以实现更为开放、灵活的组件。
申明插槽 ：在组件内部通过<slot></slot>申明一个插槽，整个<slot></slot>会被替换为组件元素标签的内容（InnerHTML）。后备内容/默认值：
<slot>默认显示内容</slot>，在没有提供内容时使用后备内容。<div id="app13"> <com-search-box> <template #header v-slot:header><p>{{search.title[0]}}</p></template> <template v-slot:default> <b>🔍</b><span>搜索</span> </template> </com-search-box> </div> <script> let comSearchBox = { template: `<div> <slot name="header"></slot> <input> <button> <slot>搜索</slot> </button></div>`, } let app13 = new Vue({ el: "#app13", data: {search:{title:['百度搜索','学术搜索','图片搜索']}}, components: { 'com-search-box': comSearchBox } }) </script>🔸具名插槽，有名字的VIP插槽，name特性取名，用于需要多个插槽的场景。没命名的插槽
默认名称为” **default**“—默认插槽。必须通过一个模板
<template>来使用，用slot参数v-slot:name=#name指定插槽的名字。无、不指定名字的内容用于默认插槽。- 缩写
#=v-slot:，只能用于带参数的v-slot。- 插槽名可以用动态参数，[data-name]
🔸作用域插槽：插槽内容访问子组件内部数据
父级不能访问子组件内部的数据，为了可以让插槽内容可以访问到子组件内部的数据，于是有了作用域插槽，主要就是2个步骤。
❶ 组件内部把数据绑定在插槽的特性Attribute上 <slot v-bind:btnKey="btnKey">，称为插槽的Prop，在父级作用域可以访问。
❷ 在组件上引用插槽prop ：<template v-slot="soldData">，可取一个新名字。当然这里也可以用当前作用域的绑定数据。<div id="app13"> <com-search-box> <template #header v-slot:header> <p>{{search.title[1]}}</p> </template> <template v-slot="soldData"> <b>🔍</b><span>{{soldData.btnKey[1]}}</span> </template> </com-search-box> </div> <script> let comSearchBox = { data: function () { return { 'btnKey': ['搜索', 'search'] } }, template: `<div> <slot name="header"></slot> <input> <button> <slot v-bind:btnKey="btnKey">{{btnKey[0]}}</slot> </button></div>`, } let app13 = new Vue({ el: "#app13", data: { search: { title: ['百度搜索', '学术搜索', '图片搜索'] } }, components: { 'com-search-box': comSearchBox } }) </script>
todo-list（代办列表）的示例：
点击查看【juejin】
组件树关系
$refs 通过过 refattribute 注册的所有 DOM 元素和组件实例的一个引用对象。
当 ref 和 v-for 一起使用的时候，其引用为一个数组$parent 父实例，根实例的 $parent 为null $root 组建树的根实例，根实例的 $root 为自己 $children 子组件实例数组 Array<Vue instance>
当我们构建一颗树形结构（如文件目录树）的组件时，会递归循环引用，造成组件的循环依赖。
07、可复用性 & 组合
[mixins]混入(CtrlV)组件代码
混入（mixins）可以灵活复用组件中的代码，可惜只能用于组建内，也仅支持Vue的选型。步骤：
- 定义混入对象：
let cmixin={}； - 组件中使用：
**mixins**:[cmixin]，混入对象中的内容。
代码混入（合并）规则：
- 选项合并：如果混入时存在代码冲突，则会先递归合并，然后本地优先的策略。
- 混入的钩子，合并为一个数组，依次调用。
- 全局混入
Vue.**mixin**( mixin )，应用于后面所有的Vue对象。 - 混入优先级：本地代码优先 > 局部混入 > 全局混入。
自定义混入合并策略：Vue.config.optionMergeStrategies
let cmixin = { data: { message: "hello world!" }, methods: { say: function () { console.log(this.message) } } } let app1 = new Vue({ el: "#app1", data:{name:'sam'}, mixins: [cmixin], created: function () { this.say() } }):::warning 📢这里用ES6的展开运算符
...，也能达到类似的复用目的。 :::v-自定义指令
指令是对Dom元素的扩展，具有一定的行为特征。注册的自定义指令，需要用指令的钩子函数来触发，一个指令支持多个钩子函数，不同钩子函数（触发点）可设置不同的行为。如果不指定钩子函数，就是全都要，都会触发调用。
🔸注册方式：全局、局部- 全局注册：
Vue.**directive**( id, [definition] )，注意顺序，先定义后使用。 - 局部注册-选项：
directives:{ id: { } }。
- 全局注册：
🔸指令命名：参考HTML命名规范，小写+连字符，正式指令名称会加上
**v-**。定义的时候可以用驼峰命名，会被自动解构。
🔸指令函数参数：(el, binding, vnode, oldVnode)- el：Dom元素
- binding：指令对象，包含指令名称、参数、修饰符、属性值、上一次的属性值 。这里的值可用来做变化判断，以优化指令性能。
- vnode：虚拟Dom元素
- oldVnode：上一个虚拟Dom元素
🔸使用：
<input v-id:arg.ky='value'>构子函数 描述 bind 只调用一次，指令第一次绑定到元素时调用。 inserted 被绑定元素插入父节点时调用 update 所在组件的 VNode 更新时调用 componentUpdated 所在组件的 VNode 更新后调用 unbind 只调用一次，指令与元素解绑时调用 <div id="app1"> <p> <label>用户名：<input type="text" v-model="userName" maxlength="40" size="40" placeholder="请输入用户名"></label> <span style="font-size: 0.9em;" v-check.required="userName" check-reg="^\w{4,6}$" check-error="用户名必须是4-6位的字母数字"></span> </p> <p> <label>用户名：<input type="text" v-model="email" maxlength="40" size="40" placeholder="请输入邮箱"></label> <span style="font-size: 0.9em;" v-check="email" check-reg="^\w+@\w+\.\w+$" check-error="邮箱格式不合法"></span> </p> </div> <script> // 验证器（必填修饰符），正则，错误信息，check,check-reg,check-error let mixinDirectivesValidator = { directives: { check: { bind(el, bind) { el.text = el.getAttribute('check-error'); el.reg = new RegExp(el.getAttribute('check-reg')); el.style.color = 'red'; if (bind.modifiers.required) el.innerText = ' * 必填'; }, update: function (el, bind) { if (bind.value === bind.oldValue) return; el.innerText = ''; if (bind.modifiers.required) el.innerText = ' * 必填'; if (!el.reg.test(bind.value)) el.innerText = el.text; } } } } let app1 = new Vue({ el: "#app1", data: { userName: '', email: '' }, mixins: [mixinDirectivesValidator] }) </script>| 插值过滤器
过滤器就是一个函数，在
{{文本插值}}、v-bind="表达式"绑定表达式后面使用，对绑定的值进行过滤处理。支持链式的过滤使用，支持参数，常用语格式化显示。在V2、V3中，过滤器被逐渐弱化，更推荐用表达式或计算属性。- 全局过滤器：
Vue.**filter**( id, func(value,...arg )，第一个参数为管道符号前面的绑定值。 - 局部过滤器-
**filters**{id:func(value,...arg)}选项，（❗多了个s） 使用：用管道符号连接，
{{文本插值 | filter1 | filter2(arg)}}<div id="app2"> <ul> <li v-for="a in arr">{{a|fixedLength(4)| money|money}}</li> </ul> </div> <script> //全局过滤器，数字固定长度 Vue.filter("fixedLength", function (value, length) { return (Array(length).join('0') + value).slice(-length); }) let app2 = new Vue({ el: "#app2", data: { arr: [1, 2, 3, 44, 55, '5块'] }, //具备过滤器定义 filters: { money: function (v) { return '￥' + v; } } }) </script>Vue插件开发
插件就是一个函数或者包含
install()方法的对象，目的是实现封装复用。通过Vue.use()来安装，给Vue提供全局的扩展能力，如添加全局的指令、方法、组件，混入选项等，很多Vue的UI组件都是这么处理的。**install**(Vue,...args)：插件应该提供的安装函数，第一个参数就是Vue构造器，就可以调用Vue的静态方法做一些处理。后面的参数就是插件自己用的参数了。Vue.**use**(插件, ...args)：注册插件，第一个参数为插件，后面就是插件需要的参数选项了。// 封装插件 export let SuperPlugin = { install(Vue, ...args) { console.log('安装插件SuperPlugin', args); //安装一个UI组件 Vue.component('super-btn', { template: '<button>Super<slot></slot></button>' }); //添加全局静态方法 Vue.$get = function (url) { /*ajax get*/ }; Vue.$post = function (url, data) { /*ajax post*/ }; //添加实例方法 Vue.prototype.$myMethod = function () { }; //混入全局的选项 Vue.mixin({ created: function () {console.log('创建组件') } }); } } // 使用插件 import { SuperPlugin } from './super-plugin.js' Vue.use(SuperPlugin, 1, 2, 3);
*08、JSX
//TODO
- 缩写
若有收获，就点个赞吧
0 人点赞
