Vue组件的创建方式

前言

最近重新巩固了一下 Vue 组件的知识，还是有收获的，这里备份以便以后回顾。本篇讲解一下 Vue 组件的创建的三种方式吧。

一、常用的创建方式

<div id="app">
			<my-component></my-component>
		</div>
		<script>
			Vue.component('my-component',{
				template: '<div>这里是组件的内容</div>'
			});
			var vm = new Vue({
				el: '#app'
			})
		</script>

（字体我加了一个 css 类，来试试调样式）

这种创建组件的方式，无论是教材上还是官方 API 都采用的是这种方式。我们把组件的 HTML 的代码写在 template: ‘ ’ 中，而且里面也必须含有 HTML 标签。此次用到的案例十分简单，功能也十分单一，但我们面临实际情况时，很不使用。
1.组件组件中有多个标签时

<div id="app">
			<my-component></my-component>
		</div>
		
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('my-component',{
				template: "<div class='red'>这里是组件的内容</div><p>我是p标签</p>"
			});
			var vm = new Vue({
				el: '#app',
			})
		</script>

在 < div > 标签后面写个平级标签 < p > ，页面展示效果并没有改变，并且控制台会报错

这也是组件第一个 BUG 的地方，template: ‘ ’ 所有的标签只能写在最外层的 < div > 中，否则无法实现。最让人头疼的它的所有标签内容只能写在同一行。

<div id="app">
			<my-component></my-component>
		</div>
		
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('my-component',{
				template: "<div><h2>我是h2</h2><p>我是p标签</p></div>"
			});
			var vm = new Vue({
				el: '#app',
			})
		</script>

上面的代码这是可以运行的，但很丑很不符合我们的规范。但当我们想换行就会报错并且整个页面也没了显示。

我查阅相关资料，资料给出了一种解决方法。

<div id="app">
			<my-component></my-component>
		</div>
		
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('my-component',{
				template: '\
				<div>\
				<h2>我是h2</h2>\
				<p>我是p标签</p>\
				</div>'
			});
			var vm = new Vue({
				el: '#app',
			})
		</script>

在每一行的后面加上“\”即可正常运行。但这种办法还是有 BUG ，加了“\”虽然能显示也没有报错，但自动补全和智能提示功能没了。

二、完善版的创建方式

话不多说，直接撸代码。

<div id="app">
			<my-component></my-component>
		</div>
		<template id="tmp">
			<div>
				<h2>我是完善以后的h2</h2>
				<p>我是完善以后的p标签</p>
			</div>
		</template>
		<script>
			Vue.component('my-component',{
				template: '#tmp'
			});
			var vm = new Vue({
				el: '#app',
			})
		</script>

给 template 定义一个 id ，然后在< body >中 id 为 “app”（vue实例化的div）以外的地方创建 template 标签。并且在 template 中也同样需要一层最外层 < div >标签。这种方法就完美地解决了第一种方法里的各种 BUG。

三、没事找事的创建方式

 <div id="app">
    <mycom1></mycom1>
  </div>
  <script>
   var com1 = Vue.extend({
      template:'<h3>这是使用 Vue.extend 创建的组件</h3>'
   })
    Vue.component('mycom1', com1)
    var vm = new Vue({
      el: '#app',
    });
  </script>

<div id="app">
    <mycom1></mycom1>
  </div>
  <script>
    Vue.component('mycom1', Vue.extend({
      template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
    }))
    var vm = new Vue({
      el: '#app',
    });
  </script>

这两种方法不敢说以后肯定用不到，大家能看懂这个代码就好。