前言
最近重新巩固了一下 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>
这两种方法不敢说以后肯定用不到,大家能看懂这个代码就好。