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的效果。

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