<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> </div> <script> // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) new Vue({ el: '#components-demo' }) </script> </body> </html>
这些类似于<button-counter>没见过的标签就是组件，每个标签代表一个组件，这样我们 就可以将组件进行任意次数的复用。 使用组件的好处： 提高开发效率 方便重复使用 简化调试步骤 提升整个项目的课维护性 便于协同开发 组件系统让我们可以用独立可复用的小组件来构建大型应用， 几乎任意类型的应用的界面都可以抽象为一个组件树
全局注册 全局注册有三种方式。 要注册一个全局组件，我们可以使用 Vue.component(tagName,options)，代码如下： Vue.component('my-component', { // 选项 }) 示例代码如下： <div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<h1>注册</h1>' }); var vm=new Vue({ el:'#app' }) </script>
组件的基本使用 使用 Vue.extend 配合 Vue.component 方法，代码如下 <div id="app"> <my-list></my-list> </div> <script> var list=Vue.extend({ template:'<h1>this is a list</h1>', }); Vue.component("my-list",list); //根实例 new Vue({ el:"#app", }) </script>
将模板字符串，定义到 script 标签中，示例代码如下： <div id="app"> <account></account> </div> <template id="tmpl"> <div><a href="#">登录</a> | <a href="#">注册</a></div> </template> <script> Vue.component('account', { template: '#tmpl' }); new Vue({ el:"#app", }) </script>
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <account></account> </div> <template id="tmpl"> <div><a href="#">登录</a> | <a href="#">注册</a></div> </template> <script> Vue.component('account', { template: '#tmpl' }); new Vue({ el:"#app", }) </script> </body> </html>
局部注册 如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的 components 属性实现局部注册，示例代码如下： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <account></account> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, components: { // 定义子组件 account: { // account 组件 template: '<div><h1>这是Account组</h1><login></login></div>', // 在这里使用定义的子组件 components: { // 定义子组件的子组件 login: { // login 组件 template: "<h3>这是登录组件</h3>" } } } } }); </script> </body> </html>
可以使用“flag”标识符结合“v-if”和“v-else”切换组件 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <account v-if="flag"></account> <login v-else="flag"></login> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: true }, methods: {}, components: { // 定义子组件 account: { // account 组件 template: '<div><h1>这是Account组件</h1></div>', // 在这里使用定义的子组件 }, login: { // login 组件 template: "<h3>这是登录组件</h3>" } } }); </script> </body> </html>
DOM模板解析说明 在自定义组件中使用这些受限制的元素时会导致一些问题 <table> <my-row>...</my-row> </table> 自定义组件被认为是无效的内容，因此在渲染的时候会导致错误。这时要使用特殊的 is 属性来挂载组件，如下： <table> <tr is="my-row"></tr> </table>
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <table border="1" cellpadding="5" cellspacing="0"> <my-row></my-row> <tr is="my-row"></tr> </table> </div> <script type="text/javascript"> new Vue({ el:'#app', components:{ myRow:{ template:'<tr><td>123456</td></tr>' } } }); </script> </body> </html>
直接引用<my-row>组件标签并没有被<table>标签包裹，而用 is 特殊属 性挂载的组件可以达到效果。 注意：如果我们使用的是字符串模板，是不受限制的。