亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue 組件注冊全解析

 更新時間：2020年12月17日 09:02:30   作者：風都散了……  
這篇文章主要介紹了Vue 組件注冊全解析的相關資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

全局組件注冊語法

components中的兩個參數(shù)組件名稱和組件內容

Vue.component(組件名稱, {
   data: 組件數(shù)據(jù),
   template:組件模板內容
  })

全局組件注冊應用

組件創(chuàng)建：

Vue.component('button-counter', {
   data: function(){
    return {
     count: 0
    }
   },
   template: '<button @click="handle">點擊了{{count}}次</button>',
   methods: {
    handle: function(){
     this.count ++;
    }
   }
  })
  var vm = new Vue({
   el: '#app',
   data: {
   }
  });

如何在頁面中運用，直接在頁面中應用組件名稱

<div id="app">
  <button-counter></button-counter>
</div>

這個組件是可以重用的，直接在頁面中多次使用，切數(shù)據(jù)相互獨立，互不干擾

組件注冊注意事項

1.data必須是一個函數(shù)

  • 分析函數(shù)與普通對象的對比

2.組件模板內容必須是單個根元素

  • 分析演示實際的效果

3.組件模板內容可以是模板字符串

  • 模板字符串需要瀏覽器提供支持（ES6語法）

4.組件命名方式

  • 短橫線方式
Vue.component('my-component',{/*...*/})

駝峰方式

Vue.component('MyComponent',{/*...*/})

如果使用駝峰式命名組件，那么在使用組件的時候，只能在字符串模板中用駝峰的方式使用組件，但是在普通的標簽模板中，必須使用短橫線的方式使用組件

局部組件

局部組件只能在注冊它的父組件中使用

局部組件注冊語法

var ComponentA = {/*...*/}
var ComponentB = {/*...*/}
var ComponentC = {/*...*/}
new Vue({
  el : '#app',
  components: {
　　　　'component-a' : ComponentA,
　　　　'component-b' : ComponentB,
　　　　'component-c' : ComponentC
　　}
})

組件的創(chuàng)建

Vue.component('test-com',{
   template: '<div>Test<hello-world></hello-world></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
   }
  });

頁面中的應用

<div id="app">
  <hello-world></hello-world>
  <hello-tom></hello-tom>
  <hello-jerry></hello-jerry>
  <test-com></test-com>
 </div>

以上就是Vue 組件注冊全解析的詳細內容，更多關于Vue 組件注冊的資料請關注腳本之家其它相關文章！

相關文章

最新評論