快捷導(dǎo)航

vue 怎么創(chuàng)建組件及組件使用方法

更新時(shí)間：2017年07月27日 09:20:39 作者：你的一燈

vue中的核心就是組件，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼，下面通過本文重點(diǎn)給大家介紹vue 創(chuàng)建組件及組件使用方法，感興趣的朋友一起看看吧

什么是組件？

組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。

我知道vue中核心就是組件，但是組件是什么呢？組件有什么用呢？

這里來說說怎么用組件？怎么樣創(chuàng)建自己的組件？：

1）創(chuàng)建自己的組件

通過vue.extend("template");通過vue構(gòu)造器去拓展一個(gè)模板，然后注冊，最后使用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>進(jìn)一步了解component的話法糖</title>
    <script src="../vue.js"></script>
  </head>
  <body>
　　  
    <div>這是一個(gè)全局注冊的</div>
    <div id="app">
      <parent></parent>
    </div>
  </body>
</html>
<script>
  var child= Vue.extend({template:'<p>this is child component</p>'});
  //Vue.component("組件名",｛｝);在注冊之前會(huì)自動(dòng)創(chuàng)建（調(diào)用vue.extend()方法 ）
  //這是一個(gè)全局注冊（兼創(chuàng)建與注冊）
  Vue.component("parent",{//有時(shí)候我們可以省略，extend.
    template:'<div>this is parent component ------ {{text}} <child-component></child-component> </div>',//局部使用
    components:{
      "child-component":child,//局部注冊
    },
    //data:function(){}
    data(){
      return {text:'哈哈哈，我是組件內(nèi)部的text'}
    },
  });
  var vm= new Vue({
    el:'#app',
    data:{},
  });

進(jìn)階一下：（組件內(nèi)部在套組件，（components下面的components））

通過下面的例子，我就想說明一點(diǎn)，組件是vue構(gòu)造器的拓展，所以組件可能擁有構(gòu)造器的幾乎所有屬性（在寫這篇博客前，我們沒有聽到這個(gè)說法，所以可能是錯(cuò)的，不要信）

<body>
  <div>這是一個(gè)局部注冊</div>
  <div id="app1">
      <div><button v-on:click=get>這里觸發(fā)get方法</button></div>
    <parent-components></parent-components>
  </div>
</body> 
<script>  
//  var child=Vue.extend({template:"<span> ------child element------</span>"});
  var vp=new Vue({
    el:'#app1',
    data:{},
    methods:{
      get:function(){alert("這是構(gòu)造器中g(shù)et(全局)");}
    },
    components:{
      "parent-components":{
        template:"<div>---------<span>  parent components</span><p><button v-on:click=get>點(diǎn)擊觸發(fā)parent的get</button></p> <div><child-component></child-component></div>--------</div>",
        components:{
          //局部注冊再一次局部注冊
          "child-component":{
            template:"<span> ------child <button v-on:click=get>點(diǎn)擊觸發(fā)child中的get方法</button>element------</span>",
            methods:{
              get:function(){
                alert("這是局部注冊child-component組件中g(shù)et");
              }
            }
          }
        },
        methods:{
          get:function(){
            alert("這是蟬聯(lián)注冊parent-components里面的方法");
          }
        },
      },
    },  
  });
</script>

你知道嗎？一個(gè)components中可以定義多個(gè)組件：

將html,寫入components是不是覺得很low呢？當(dāng)template的內(nèi)容太多了，是不是不堪入目呢？那我們來使用一下vue組件的語法糖吧（不知道為啥叫這個(gè)名）

值得提醒你的事：組件中的data屬性要定義成一個(gè)函數(shù)，返回一個(gè)對象，

<script type="text/x-template" id="myComponent">
    <div>  
     <span>{{msg}}</span>
    </div>
  </script>
  <template id='myCom'>
   <span>{{msg}}</span>
  </template>
  <div id="app">
    <parent-component-script></parent-component-script>
    <parent-component-tem></parent-component-tem>
   </div>
var vm=new Vue({
    el:"#app",
    data:{},
    components:{
      "parent-component-script":{
          template:'#myComponent',
          data(){return{msg:'這里是script'};},
      },
      "parent-component-tem":{
        template:'#myCom',
        data(){return{msg:'這里是template'} }
      },
    },
  });

你也可以更狠一點(diǎn)：的創(chuàng)建方式

值得注意的是：組件中的props中屬性值，定義時(shí)是駝峰，使用時(shí)就要變?yōu)橹袆澗€

<div id="app">
  <son :son-counter="counter"></son>
  <p>parent:<input type="text" v-model="counter"/></p>
</div>  
const son={
    template:`<div>son:<input v-model="sonCounter" /></div>`,
    props:{sonCounter:Number},
 };
var app=new Vue({
   el:'#app',
   data:{
     counter:0,
   },
   components:{
     son
   }
 });

最后一個(gè)提醒：組件的創(chuàng)建要在，vue實(shí)例化之前。

總結(jié)

以上所述是小編給大家介紹的vue 怎么創(chuàng)建組件及組件使用方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: