Vue.component的属性说明
短信预约 -IT技能 免费直播动态提醒
Vue.component的属性
Vue.component(‘组件名称’，{})中的属性
1.template
作用：用来定义组件的html模板
使用：直接接字符串
Vue.component('组件名称'，
{
template:'<p>aaa</p>'
})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属性
<div id="father">
<component is="one"></component>
<component is="two"></component>
</div>
<script>
Vue.component('one', {
template: `
<div>我是第一个组件</div>
`
})
Vue.component('two', {
template: `
<div>我是第二个组件</div>
`
})
let vm = new Vue({
el: "#father"
})
</script>
可以看到通过coponent的is属性可以绑定不同的组件，渲染不同的模板。
那么我们是不是可以通过这个属性来完成一个属性多种模板的效果呢
<div id="app">
<button @click="onclick('hc-c')">显示第一个</button>
<button @click="onclick('hc-b')">显示第二个</button>
<component :is="name"></component>
</div>
<script>
Vue.component('hc-c', {
template: `
<div>我是第一个</div>
`
})
Vue.component('hc-b', {
template: `
<div>我是第二个</div>
`
})
let vm = new Vue({
el: "#app",
data:{
name:''
},
methods:{
onclick(item){
this.name = item;
}
}
})
</script>
可以看到，通过这个is属性，我们可以达到选项卡的效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
