脚本宝典收集整理的这篇文章主要介绍了Vue笔记(三)——组件&插槽,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
是前端在单页面上最好的一种实现方式,每个组件有独立的作用域,且可以相互通信。
页面之间的跳转变成了组件之间的切换,不需要重新加载整个页面,也不用考虑页面的生命周期,换成组件的生命周期,在性能上大大的提升了。
<div id="app">
<!-- 组件的使用 -->
<global-component></global-component>
</div>
<!-- 组件的定义:Vue.component(组件名称,{template}) -->
Vue.component('global-component',{
template:'<h1>全局组件</h1>'
})
let vm = new Vue({
el:'#app'
});
最终的渲染结果
<div id="#app">
<h1>全局组件</h1>
</div>
<div id="app">
<!-- 组件的使用 -->
<private-component></private-component>
</div>
// 局部组件的定义:components:{组件名字:{}}
let vm = new Vue({
el:'#app',
components:{
'private-component':{
template:'<h1>局部组件</h1>'
}
}
});
最终渲染的结果
<div id="app">
<h1>局部组件</h1>
</div>
每一个组件有单独的作用域
let vm = new Vue({
el:'#app',
data:{count:10},
methods:{
increment:function(){
this.count +=1;
}
},
components:{
<!-- 这里写组件 -->
'component1':{
template:'<button v-on:click="increament">{{count}}</button>',
data:function(){
return {count:0}
},
methods:{
increment:function(){
this.count +=1;
}
}
}
}
});
渲染结果为:
<div id="app">
<p>10</p>
<!--
此按钮每次点击都会自增,而p标签永远都是为10,
原因是组件的作用域是单独的
-->
<button>0</button>
</div>
特殊结构:下拉列表(select)子元素必须为option,则在使用组件的时候用is
<!-- 使用v-for指令时:单个不用加(); -->
components:{
template:'<select><option :value="obj.value" v-for="obj in geder">{{obj.text}}</option></select>',
data:function(){
return {
geder:[{text:'男',value:1}{text:'女',value:0}]
}
}
}
通过控制:is=''的值(即组件的名字)来显示不同的组件
this.color = this.color == 'red' ? 'green' : 'red';
内部返回对象使用闭包函数返回一个对象;
组件的属性要先声明后使用:即先使用props['属性名'...],再进行调用
<div id="app">
<!-- 组件的使用 -->
<componnent1 title="组件属性" on-bind:text="mess"></componnent1>
</div>
// 全局组件的定义 Vue.component(组件名称,{template})
// 局部组件的定义
let vm = new Vue({
el:'#app',
data:{
mess:'动态属性'
},
<!-- 局部组件 -->
componnets:{
'componnent1':{
template:'<h1>{{title+text}}</h1>',
props:['title','text']
}
}
});
最终渲染结果
<div id="app">
<h1>组件属性</h1>
</div>
// 定义:
<div id="app">
<!-- 组件名 -->
<component v-on:事件名><component>
</div>
// 调用:直接使用组件对象 this.$emit('事件名')
Vue组件默认是覆盖渲染的,则使用slot分发内容
Vue.component('component1',{
tempalte:`
<div>
<h1>Tom<h1>
<!-- 使用slot接收组件中的标签 -->
<slot></slot>
</div>
`
})
作用:用于将标签放到特定的位置,则可以使用slot属性
<div id="app">
<!-- 使用组件 -->
<component1>
<!-- 显示标签:使用slot 属性 -->
<h1 slot=tom"">tom</h1>
</component1>
</div>
Vue.component('component1'{
template:'<div><slot name ='tom'></slot><button></button></div>'
});
将template的内容单独拿出来,写成一个template标签
只能有一个根节点
// 定义
<template id="template1">
<div></div>
</template>
// 使用
let vm = new Vue({
el:'#app',
components:{
component1:{
template:'#template1'
}
}
});
以上是脚本宝典为你收集整理的Vue笔记(三)——组件&插槽全部内容,希望文章能够帮你解决Vue笔记(三)——组件&插槽所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。