Vue.component的属性说明

这篇文章主要介绍了Vue.component的属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue.component的属性

Vue.component(‘组件名称’,{})中的属性

1.template

作用:用来定义组件的html模板

使用:直接接字符串

Vue.component('组件名称', { template:'

aaa

' })

2.data

作用:

定义一个在组件中使用的数据

定义:

Vue.component('组件名称', {     data:fuction(){         return(             msg:'aa'             //每个组件使用的数据都是独立的             //每个数据都是新创建的             //就算用的是同一个组件模板             //var a=0             //而直接return a             //则会多个页面上的组件同时使用同一个数据源         )     } })

使用:

使用插值表达式{undefined{msg}}

3.methods

作用:

定义一个在组件中使用的方法

定义:

Vue.component('组件名称', {     methods:{         方法名(){}     } })

4.props

作用:

将父组件的数据传递到子组件

定义:

Vue.component('组件名称', { props:['对接父组件数据的名称'], })

与data中的区别:

props是从父组件传递过来的,只能读取,不能修改父组件中的值

data是子组件私有的,可读可写 

Vue的component标签

作用

可以在一个组件上进行多样化渲染。例如:选项卡

is属性

    

在这里插入图片描述

可以看到通过coponent的is属性可以绑定不同的组件,渲染不同的模板。

那么我们是不是可以通过这个属性来完成一个属性多种模板的效果呢

   

在这里插入图片描述

在这里插入图片描述

可以看到,通过这个is属性,我们可以达到选项卡的效果

以上为个人经验,希望能给大家一个参考,也希望大家多多支持0133技术站。

以上就是Vue.component的属性说明的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程