首先我们要明白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’来说,总的流程如下:

  1. 去vue实例的data里找到current对应的值
  2. 用这个值再去所有的component里找到对应的component

对于is=‘current’来说,总的流程如下:

  1. 直接用current去所有的component里找到对应的component
Logo

前往低代码交流专区

更多推荐