Vue 中 :is和is的差别

在不同组件之间进行动态的切换，比如一个标签页内可以切换不同的页面，这个时候我们就可以使用 is 或者 :is来进行切换

// 下面是vue 的 is 和 :is 的用法


<template>
<div id:"App">
<p> 这是一个 is 用法的例子 </p>
  <componentA is="componentA"></component>
</div>  
  <hr>
<p> 这是一个 :is 的用法 </p>
    <componentB :is="two"></component>
</template>

<script>
  import componentA from './componentA.vue'
  import componentB from './componentB.vue'
export default{
  data(){
    return {
      two:"componentA"，
     // two:"componentB"
    }
  }
}
</script>


// 下面是componentA.vue 里面的内容
<template>
<div>
componentA  
</div>  
</template>

// 下面是componentB.vue 里面的内容
<template>
<div>
componentB  
</div>  
</template>



// 上面打印出来的结果是：

这是一个 is 用法的例子
componentA

这是一个 :is 用法的例子
componentA

从上面的例子中我们可以发现 is 是直接选中后面里面的内容，直接把componentA里面的内容拿了过来，:is 是将赋值给 two 的 组件内容拿了过来，:is就是数据绑定，绑定值必须是在data中定义的，下面还有个例子可以更加直接的展现出来

简略的回答就是

假设父组件中有个 show数据， show = 'one'

:is = "show" ----> 实际上是 is="one"

is ="show"----> 实际上就是 is="show"

<div id="app">
	<span>这是  :is="show"的案例</span>
	<component :is="show"></component>
	<span>这是  is="show"的案例</span>
	<component is="show"></component>
</div>
<script>
	Vue.component('one',{
		template: "<div>one<div>"
	})
	Vue.component('show',{
		template: "<div>show<div>"
	})
	var vm = new Vue({
		el: '#app',
		data: {
			show: 'one'
		},
	})
</script>

// 最后输出的内容是这样

这是 :is="show" 的案例
one
这是 is ="show" 的案例
show