vue的is和v-bind:is怎么用
首先我们要明白v-bind的意义:<component v-bind:is="current"></component>如果出现了v-bind那么加载在这个组件的时候,会去创建的vue实例对象的data里找值:var vm = new Vue({el: '#app',data: function(){return {current: 'sub'...
·
首先我们要明白v-bind的意义:
<component v-bind:is="current"></component>
如果出现了v-bind那么加载在这个组件的时候,会去创建的vue实例对象的data里找值:
var vm = new Vue({
el: '#app',
data: function(){
return {
current: 'sub'
}
}
})
如图所示,找到sub,现在就等同于用sub替换了current:
<component is="sub"></component>
注意,这里:is变成了is,因为我们已经成功的从vm里面取到了current,剩下的事情就是去找到这个叫做sub的component:
Vue.component('sub',{
...
})
最后这个标签代表的内容就变成了:
<sub></sub>
对于:is=‘current’来说,总的流程如下:
- 去vue实例的data里找到current对应的值
- 用这个值再去所有的component里找到对应的component
对于is=‘current’来说,总的流程如下:
- 直接用current去所有的component里找到对应的component
更多推荐
已为社区贡献5条内容
所有评论(0)