全局组件和局部组件

曾经终败给现在 2022-06-02 10:23 323阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="js/vue.js"></script>
  6. </head>
  7. <body>
  8.     <div id="example">
  9.         <my-header></my-header>
  10.         <p>{
  11.    {msg}}</p>
  12.         <my-button></my-button>
  13.         <my-footer></my-footer>
  14.     </div>
  16.     <script type="text/javascript">
  17.         Vue.component('my-footer',{  //必须包在一个容器里，否则会报错
  18.             //全局组件可以包含全局组件，不能包含局部组件，否则会报错
  19.             template:`
  20.                 <div>   
  21.                     <h2>这是尾部</h2>
  22.                     <p>end</p>
  23.                     <my-button></my-button>
  24.                 </div>
  25.             `
  26.         });
  28.         Vue.component('my-button',{
  29.             template:'<button>按钮</button>'
  30.         });
  32.         new Vue({
  33.             el:'#example',
  34.             data:{
  35.                 msg:'VueJS is Awesome'
  36.             },
  37.             components:{
  38.                 'my-header':{
  39.                     template:'<h1>this is header</h1>'
  40.                 }
  41.             }
  42.         });
  43.     </script>
  44. </body>
  45. </html>

发表评论

表情：
评论列表 （有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读