Vue组件的使用及个人理解与介绍

2023-08-29 05:28:04 469

组件的基本使用

注册组件

注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

Vue.component('mycomponent',{
template:`这是一个自定义组件`,
data(){
return{
message:'helloworld'
}
}
})

如上方式，就已经创建了一个自定义组件，然后就可以在Vue实例挂在的DOM元素中使用它。

直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件。

varapp=newVue({
el:'#app',
data:{
},
components:{
'my-component':{
template:`这是一个局部的自定义组件，只能在当前Vue实例中使用`,
}
}
})

模板的要求

注意：组件的模板只能有一个根元素。下面的情况是不允许的。

template:`这是一个局部的自定义组件，只能在当前Vue实例中使用
`,

组件中的data必须是函数

可以看出，注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。
这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。

而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了。

关于DOM模板的解析

当使用DOM作为模版时(例如，将el选项挂载到一个已存在的元素上),你会受到HTML的一些限制，因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素

...

自定义组件被认为是无效的内容，因此在渲染的时候会导致错误。这时应使用特殊的is属性：

也就是说，标准HTML中，一些元素中只能放置特定的子元素，另一些元素只能存在于特定的父元素中。比如table中不能放置div，tr的父元素不能div等。所以，当使用自定义标签时，标签名还是那些标签的名字，但是可以在标签的is属性中填写自定义组件的名字。

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

JavaScript内联模版字符串
.vue组件
其中，前两个模板都不是Vue官方推荐的，所以一般情况下，只有单文件组件.vue可以忽略这种情况。

组件的属性和事件

在html中使用元素，会有一些属性，如class,id，还可以绑定事件，自定义组件也是可以的。当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。

如上如所示，父子组件之间的通信就是propsdown,eventsup，父组件通过属性props向下传递数据给子组件，子组件通过事件events给父组件发送消息。
比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。
而当子组件内部发生了什么事情的时候，就通过自定义事件来把这个事情涉及到的数据暴露出来，供父组件处理。

如上代码，

foo是组件内部定义的一个prop属性，baz是父组件的一个data属性，
event-a是子组件定义的一个事件，doThis是父组件的一个方法
过程就是这样：

父组件把baz数据通过prop传递给子组件的foo；
子组件内部得到foo的值，就可以进行相应的操作；
当子组件内部发生了一些变化，希望父组件能知道时，就利用代码触发event-a事件，把一些数据发送出去
父组件把这个事件处理器绑定为doThis方法，子组件发送的数据，就作为doThis方法的参数被传进来
然后父组件就可以根据这些数据，进行相应的操作

属性Props

Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

Vue.component('mycomponent',{
template:'这是一个自定义组件,父组件传给我的内容是：{{myMessage}}',
props:['myMessage'],
data(){
return{
message:'helloworld'
}
}
})

然后调用该组件

注意，由于HTML特性是不区分大小写的，所以传递属性值时，myMessage应该转换成kebab-case(短横线隔开式)my-message="hello"。

v-bind绑定属性值
这里说一下v-bind绑定属性值的一个特性：一般情况下，使用v-bind给元素特性(attribute)传递值时，Vue会将""中的内容当做一个表达式。
比如：

hello

Vue.component('example',{ props:{ //基础类型检测(`null`意思是任何类型都可以) propA:Number, //多种类型 propB:[String,Number], //必传且是字符串 propC:{ type:String, required:true }, //数字，有默认值 propD:{ type:Number, default:100 }, //数组/对象的默认值应当由一个工厂函数返回 propE:{ type:Object, default:function(){ return{message:'hello'} } }, //自定义验证函数 propF:{ validator:function(value){ returnvalue>10 } } } })

//自定义Person构造器 functionPerson(name,age){ this.name=name this.age=age } Vue.component('my-component',{ template:`

名字:{{person-prop.name}}，年龄：{{person-prop.age}}

`, props:{ person-prop:{ type:Person//指定类型 } } }) newVue({ el:'#app2', data:{ person:2//传入Number类型会报错 } })

Vue.component('my-checkbox',{ model:{ prop:'checked',//将输入的特性改为checked event:'change'//触发的自定义事件类型为change }, props:{ checked:Boolean, //thisallowsusingthe`value`propforadifferentpurpose value:String } })

Vue.component('my-component3',{ template:``, props:['checked'],//属性名改变 model:{ prop:'checked', event:'change' }, methods:{ checkInput(value){ varhello='hello' if(!hello.includes(value)){ this.$emit('change',hello)//事件类型改变 this.$refs.input.value=hello }else{ this.$emit('change',value)//事件类型改变 } } } })

home post about

Vue组件的使用及个人理解与介绍

组件的基本使用

注册组件

模板的要求

组件中的data必须是函数

关于DOM模板的解析

组件的属性和事件

属性Props

动态绑定特性值

子组件希望对传入的prop进行操作

给子组件传递正确类型的值

Prop验证

非Prop类型的属性

覆盖非Prop属性

自定义事件

绑定原生事件

探究v-model

使用自定义事件创建自定义的表单输入组件

定制组件的v-model

动态组件

保留切换出去的组件，避免重新渲染

使用slot分发内容

单个slot

我是子组件的标题

我是父组件的标题

我是父组件的标题

我是子组件的标题

具名slot

这里可能是一个页面标题

作用域插槽

随机推荐

Vue组件的使用及个人理解与介绍

组件的基本使用

注册组件

模板的要求

组件中的data必须是函数

关于DOM模板的解析

组件的属性和事件

属性Props

动态绑定特性值

子组件希望对传入的prop进行操作

给子组件传递正确类型的值

Prop验证

非Prop类型的属性

覆盖非Prop属性

自定义事件

绑定原生事件

探究v-model

使用自定义事件创建自定义的表单输入组件

定制组件的v-model

动态组件

保留切换出去的组件，避免重新渲染

使用slot分发内容

单个slot

我是子组件的标题

我是父组件的标题

我是父组件的标题

我是子组件的标题

具名slot

作用域插槽

热门推荐

随机推荐