一、递归组件
组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。
代码如下:
<p id="app19">
<my-component19 :count="1"></my-component19>
</p>
Vue.component('my-component19',{
name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件,全局的ID会被自动设置为组件的name。
props: {
count: {
type: Number,
default: 1
}
},
template: '<p><my-component19 :count="count+1" v-if="count<3"></my-component19></p>'
});
var app19 = new Vue({
el: '#app19'
});
结果为:
<p id="app19">
<p>
<p>
<p><!----></p>
</p>
</p>
</p>
设置name 后,在组件模板内就可以递归使用了,不过需要注意的是,必须给一个条件来限制递归数量,否则会抛出错误: max stack size exceeded 。
组件递归使用可以用来开发一些具有未知层级关系的独立组件,比如级联选择器和树形控件等。
二、内联模板
组件的模板一般都是在template 选项内定义的, Vue 提供了一个内联模板的功能,在使用组件时,给组件标签使用inline-template 特性,组件就会把它的内容当作模板,而不是把它当内容分发,这让模板更灵活。
代码如下:
<p id="app20">
<my-component20 inline-template>
<p>
<h3>在父组件中定义子组件的模板</h3>
<p>{{msg}}</p>
</p>
</my-component20>
</p>
Vue.component('my-component20',{
data: function(){
return {
msg: '在子组件声明的数据'
}
}
});
var app20 = new Vue({
el: '#app20'
});
三、动态组件
Vue.js 提供了一个特殊的元素<component> 用来动态地挂载不同的组件, 使用is特性来选择要挂载的组件。
代码如下:
<p id="app21">
<component :is="currentView"></component>
<button @click="changeView('A')">切换到A</button>
<button @click="changeView('B')">切换到B</button>
<button @click="changeView('C')">切换到C</button>
</p>
var app21 = new Vue({
el: '#app21',
data: {
currentView: 'comA'
},
methods: {
changeView: function(data){
this.currentView = 'com'+ data //动态地改变currentView的值就可以动态挂载组件了。
}
},
components: {
comA: {
template: '<p>组件A</p>'
},
comB: {
template: '<p>组件B</p>'
},
comC: {
template: '<p>组件C</p>'
}
}
});
四、异步组件
当你的工程足够大, 使用的组件足够多时, 是时候考虑下性能问题了, 因为一开始把所有的组件都加载是没必要的一笔开销。
好在Vue.js 允许将组件定义为一个工厂函数,动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数, 并且把结果缓存起来,用于后面的再次渲染。
<p id="app22">
<my-component22></my-component22>
</p>
Vue.component('my-component22',function(resolve, reject){
window.setTimeout(function(){
resolve({
template: '<p>我是异步渲染的</p>'
})
},2000)
});
var app22 = new Vue({
el: '#app22'
});
工厂函数接收一个resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用reject( reason )指示加载失败。
这里setTimeout 只是为了演示异步,具体的下载逻辑可以自己决定,比如把组件配置写成一个对象配置,通过Ajax 来请求,然后调用resolve 传入配置选项。
五、问题
1、父组件向子组件传值,子组件能否修改父组件属性?
不能,子组件需要克隆一份副本,子组件去操作自己的属性
2、组件props属性和非props属性的两大区别?
1.props属性,子组件可以直接使用父组件传过来的props属性变量;
props属性如果直接使用父组件传来的属性变量则会报错
2.非props属性,在html上属性不会显示出来,非props属性则会显示出来。
3、vue中如何使用插槽?
如果父组件想给子组件传递一段html代码,子组件想显示的话,必须防止标签转义。
4、作用域插槽怎么用?
一般使用场景:如果子组件有个循环,但是循环显示的内容由父组件控制显示那个属性,则可以使用作用域插槽;或者子组件某一部分的dom元素希望父组件传递过来的时候使用。