组件命名方式||局部组件注册：局部组件只能在注册他的父组件中使用
生活随笔
收集整理的這篇文章主要介紹了
组件命名方式||局部组件注册：局部组件只能在注册他的父组件中使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
組件命名方式
組件注冊注意事項
? ? ? ? ? ? ? ? 如果使用駝峰式命名組件，那么在使用組件的時候，只能在字符串模板中用駝峰的方式使用組件，但是
? ? ? ? ? ? ? ? 在普通的標簽模板中，必須使用短橫線的方式使用組件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><button-counter></button-counter><hr><!--<HelloWorld></HelloWorld> 這種寫法是錯誤的 --><hello-world></hello-world></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('HelloWorld', {data: function(){return {msg: 'HelloWorld'}},template: '<div>{{msg}}</div>'});Vue.component('button-counter', {data: function(){return {count: 0}},template: `<div><button @click="handle">點擊了{{count}}次</button><button>測試123</button><HelloWorld></HelloWorld></div>`,methods: {handle: function(){this.count += 1;}}})var vm = new Vue({el: '#app',data: {}});</script> </body> </html>
局部組件注冊
局部組件注冊 局部組件只能在注冊他的父組件中使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><hello-world></hello-world><hello-tom></hello-tom><hello-jerry></hello-jerry><test-com></test-com></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('test-com',{// template: '<div>Test<hello-world></hello-world></div>' 這個是錯誤的 <hello-world></hello-world> 是局部組件template: '<div>Test</div>'});var HelloWorld = {data: function(){return {msg: 'HelloWorld'}},template: '<div>{{msg}}</div>'};var HelloTom = {data: function(){return {msg: 'HelloTom'}},template: '<div>{{msg}}</div>'};var HelloJerry = {data: function(){return {msg: 'HelloJerry'}},template: '<div>{{msg}}</div>'};var vm = new Vue({el: '#app',data: {},components: {'hello-world': HelloWorld,'hello-tom': HelloTom,'hello-jerry': HelloJerry}});</script> </body> </html>總結
以上是生活随笔為你收集整理的组件命名方式||局部组件注册：局部组件只能在注册他的父组件中使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组件化开发思想||全局组件注册语法||组
- 下一篇： 组件间数据交互||父组件向子组件传值-基