欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS框架之vue.js(深入三:组件1)

程序员文章站 2023-11-13 12:38:16
这个要单独写,原文是这么描述vue的组件的:组件(component)是 vue.js 最强大的功能之一。组件可以扩展 html 元素,封装可重用的代码。在较高层面上,组件...

这个要单独写,原文是这么描述vue的组件的:组件(component)是 vue.js 最强大的功能之一。组件可以扩展 html 元素,封装可重用的代码。在较高层面上,组件是自定义元素,vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 html 元素的形式,以 is 特性扩展。

这个特性我感觉比较难理解,一步步来,看看组件到底是个什么东西?

1.举个栗子

//model层:
// 通过extend方式定义一个vue组件
var mycomponent = vue.extend({
template: '<div>a custom component!</div>'
})
// 向vue注册这个组件,名称定为my-component
vue.component('my-component', mycomponent)
// 创建根实例
new vue({
el: '#example'
})
//vue层:
<div id="example">
<my-component></my-component>
</div>

渲染为:

<div id="example">
<div>a custom component!</div>
</div>

就是这个栗子,差点把我忽悠了,以为前面对extend的概念理解错了。还记得前面是这么描述
var mycomponent = vue.extend()的,vue相当于基类,mycomponent继承了vue,拥有了vue的属性和方法,但是继承的概念还有另一层,就是基类是木有子类自定义的属性和方法的。这里的子类mycomponent扩展了一个属性template,按照继承的说法,vue基类是不能使用的,但是这个栗子看似违背了这个规则,最后创建的是vue实例,同时让模板生效了。正常的写法不是应该这样:

//model层:
// 通过extend方式定义一个vue组件
var mycomponent = vue.extend({
template: '<div>a cu stom component!</div>'
})
// 不用注册
//vue.component('my-component', mycomponent)
// 创建mycomponent 实例
new mycomponent ({
el: '#example'
})
//vue层:
<div id="example">
//不用组件
//<my-component></my-component>
</div>

经过试验,这种写法确实没错,也可以正常显示。问题来了,为什么第一种写法也是可以的,比较两处代码,发现第一种写法有一个注册过程,注册了一个my-component,最后使用的也是这个my-component,仔细想想,并不是说vue实例可以使用template,而是向vue注册了这个组件后,vue实例就可以使用这个组件了,所以并不冲突。(吓死宝宝了- -)

想清楚这个后,再来考虑另外一个问题,这两种写法的区别在于哪里?
有没有发现,第二种写法其实是很有限制的,他替换了整个div,不管div中有多少内容。比如:

<div id="example">
ssssdfsdaf
<button>abc</button>
</div>

最后统统不见,被替换成<div>a cu stom component!</div>。灵活度太低,如果我只想替换ssssdfsdaf怎么办?所以就要用第一种方式了,于是幡然醒悟,原来这就是组件,就像一个零件一样,想往哪塞就往哪塞:

<div id="example">
<my-template>ssssdfsdaf<my-template>
<button>abc</button>
</div>

另外,注册必须在新建实例前,反过来的话,新建的实例肯定不能使用组件的。

原文还说replace可以决定是否替换,这个不知道咋用,先留一坑在这,后面看看能否用上。 //坑1

2.组件注册有两种方式:

一是前面看到的全局注册方式,vue.component,这种全局可用。

二是局部注册方式

// 局部注册也可以这么做
var parent = vue.extend({
components: {
'my-component': {
template: '<div>a custom component!</div>'
}
}
})

这种写法最简,很明显parent扩展了vue,拥有了组件my-component。此时的组件只有parent能用,vue不能用。

3.is属性

组件在使用的过程中也是有限制的。原因在于:

vue 的模板是 dom 模板,使用浏览器原生的解析器而不是自己实现一个。所以组件被替换后必须依照html的正常标准来,它必须是有效的 html 片段。一些 html 元素对什么元素可以放在它里面有限制。常见的限制:

a 不能包含其它的交互元素(如按钮,链接)

ul 和 ol 只能直接包含 li

select 只能包含 option 和 optgroup

table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup

tr 只能直接包含 th 和 td

以table为例

<table>
<my-component></my-component>
<my-component></my-component>
</table>
// 定义
var mycomponent = vue.extend({
template: '<tr>a custom component!</tr>'
})

这样的写法看似正常,因为<table><tr></tr></table>结构是正常的,但是实际上不能依赖自定义组件在浏览器验证之前的展开结果,所以这里不被认为是<tr>。为此,is属性便有作用了,将以上写法改写:

<table>
<tr is="my-component"></tr> //这里改成is属性
<tr is="my-component"></tr>
<tr is="my-component"></tr>
</table>
// 定义
var mycomponent = vue.extend({
template: '<div>a custom component!</div>' //这里不能用tr
})

修改后,相当于

<table>
<tr><my-component></my-component></tr>
<tr><my-component></my-component></tr>
<tr><my-component></my-component></tr>
</table>

保留了原来的tr,所以dom解析不会出错

4.props:组件通讯的手段

4.1“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props:

vue.component('child', {
// 声明 props,这里驼峰式命名
props: ['mymessage'],
//模板中可以这样用
template: '<span>{{ mymessage }}</span>'
})

html 特性不区分大小写。名字形式为 camelcase 驼峰式的 prop 用作特性时,需要转为 kebab-case(短横线隔开),所以html中是这个样子的:

<!-- kebab-case in html -->
<child my-message="hello!"></child>

以上这种是props的静态用法,也可以用 v-bind 绑定动态 props 到父组件的数据。每当父组件的数据变化时,也会传导给子组件:

<div>
<input v-model="parentmsg">
<br>
<child v-bind:my-message="parentmsg"></child>
</div>

这时候看到v-model有点懵逼,这货不是跟{{}}类似,引用data属性中的parentmsg吗?此时肯定是没有定义parentmsg的,所以v-bind:my-message=”parentmsg”绑定组件的同时,赋予了父组件parentmsg属性。

4.2 prop的绑定类型:

prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过,也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定:

<!-- 默认为单向绑定 -->
<child :msg="parentmsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentmsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentmsg"></child>

双向绑定会把子组件的 msg 属性同步回父组件的 parentmsg 属性。单次绑定在建立之后不会同步之后的变化。这里原文还特定强调了下, prop 是一个对象或数组时,是按引用传递,修改内容会随时修改父组件内容,这个有语言基础的都知道。

4.3 prop验证:

组件可以为 props 指定验证要求。当组件给其他人使用时这很有用,因为这些验证要求构成了组件的 api,确保其他人正确地使用组件。此时 props 的值是一个对象({}而不是[]),包含验证要求:

vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propa: number,
// 多种类型 (1.0.21+)
propm: [string, number],
// 必需且是字符串
propb: {
type: string,
required: true
},
// 数字,有默认值
propc: {
type: number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propd: {
type: object,
default: function () {
return { msg: 'hello' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
prope: {
twoway: true
},
// 自定义验证函数
propf: {
validator: function (value) {
return value > 10
}
},
// 转换函数(1.0.12 新增)
// 在设置值之前转换值
propg: {
coerce: function (val) {
return val + '' // 将值转换为字符串
}
},
proph: {
coerce: function (val) {
return json.parse(val) // 将 json 字符串转换为对象
}
}
}
})

type 可以是下面原生构造器:

string

number

boolean

function

object

array

type 也可以是一个自定义构造器,使用 instanceof 检测。

当 prop 验证失败了,vue 将拒绝在子组件上设置此值,如果使用的是开发版本会抛出一条警告。

这里也是看的我一脸懵逼,连个栗子都不给,拿刚才的例子改一下打个比方

vue.component('child', {
// 声明 props,这里驼峰式命名
props: ['mymessage'],
//模板中可以这样用
template: '<span>{{ mymessage+1}}</span>' //改成表达式
})
<!-- kebab-case in html -->
<child my-message="hello!"></child> //这里先不改

如果我们希望别人把child组件的mymessage当做number类型来处理,而我们这里又没有做prop验证,结果就是{{ mymessage+1}}会变成字符串拼接,当html传入的是hello!,渲染出来结果:hello!

所以说,告诉别人这里要传入number类型是必要的,于是改为:

vue.component('child', {
// 声明 props,这里驼峰式命名
props: {mymessage:number},
//模板中可以这样用
template: '<span>{{ mymessage+1}}</span>' //改成表达式
})

这时候如果传入hello!,此时渲染结果?没错,就是nan。这样别人就知道要传入一个数字了。
如果这样传入

<child my-message="123"></child> //改成123

这样总行了吧,运行,他喵的居然还不行,还是nan。原文有这样的解释:

//#字面量语法 vs. 动态语法
//初学者常犯的一个错误是使用字面量语法传递数值:
<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
因为它是一个字面 prop,它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 javascript 数字,需要使用动态语法,从而让它的值被当作 javascript 表达式计算:
<!-- 传递实际的数字 -->
<comp :some-prop="1"></comp>

好吧,也就是说刚才传递的实际上是字符串”123”,结果必然是nan,再改:

<child :my-message="123"></child> //改成123

此时{{mymessage+1}}会得到正确的结果:124

以上所述是小编给大家介绍的js框架之vue.js(深入三:组件1),希望对大家有所帮助