VueJS组件之全局组件与局部组件
生活随笔
收集整理的這篇文章主要介紹了
VueJS组件之全局组件与局部组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
全局組件
所有實例都能用全局組件。
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><runoob></runoob> </div><script> // 注冊 Vue.component('runoob', {template: '<h1>自定義組件!</h1>' }) // 創建根實例 new Vue({el: '#app' }) </script> </body> </html>效果展示自定義組件的HTML內容。
局部組件
我們也可以在實例選項中注冊局部組件，這樣組件只能在這個實例中使用：
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><runoob></runoob> </div><script> var Child = {template: '<h1>自定義組件!</h1>' }// 創建根實例 new Vue({el: '#app',components: {// <runoob> 將只在父模板可用'runoob': Child} }) </script> </body> </html>效果同上也是輸出HTML內容。
?
轉載于:https://www.cnblogs.com/boonya/p/7093056.html
總結
以上是生活随笔為你收集整理的VueJS组件之全局组件与局部组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： es2016
- 下一篇： SQL Search