运维开发网

Vue.component的属性描述

运维开发网 https://www.qedev.com 2022-04-27 15:21 出处:网络
这篇文章主要介绍了Vue.component的属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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


Vue.component的属性

vue . component(lsquo;组件名称rsquo, {}).


1.template

角色:用于定义组件的html模板。

用途:直接取弦。

Vue.component('组件名称',{template:'lt;pgt;aaalt;/pgt;'})


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:['对接父组件数据的名称'],})

与数据的差异:

Props是从父组件传递的,只能读取,但父组件中的值不能修改。

数据是私有的、可读和可写的子组件。


Vue的component标签


作用

您可以在一个组件上执行多样化的渲染。示例:选项卡


is属性 lt;div id="father"gt; lt;component is="one"gt;lt;/componentgt; lt;component is="two"gt;lt;/componentgt; lt;/divgt; lt;scriptgt; Vue.component('one', { template: ` lt;divgt;我是第一个组件lt;/divgt; ` }) Vue.component('two', { template: ` lt;divgt;我是第二个组件lt;/divgt; ` }) let vm = new Vue({ el: "#father" }) lt;/scriptgt;


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

那么是否可以利用这个属性来完成一个属性多个模板的效果呢?

lt;div id="app"gt; lt;button @click="onclick('hc-c')"gt;显示第一个lt;/buttongt; lt;button @click="onclick('hc-b')"gt;显示第二个lt;/buttongt; lt;component :is="name"gt;lt;/componentgt; lt;/divgt; lt;scriptgt; Vue.component('hc-c', { template: ` lt;divgt;我是第一个lt;/divgt; ` }) Vue.component('hc-b', { template: ` lt;divgt;我是第二个lt;/divgt; ` }) let vm = new Vue({ el: "#app", data:{ name:'' }, methods:{ onclick(item){ this.name = item; } } }) lt;/scriptgt;



可以看到,通过这个is属性,我们可以达到tab的效果。

以上个人经验,希望能给你一个参考,也希望你能支持一下搜源网。


0

精彩评论

暂无评论...
验证码 换一张
取 消