## 創(chuàng)建組件的3種方法

# 第一種:
 + Vue.extend()函數(shù)返回一個組件的構(gòu)造器,里面包含一個參數(shù),參數(shù)是對象,對象里面是一些配置項
+ Vue.component()函數(shù)利用Vue.extend()返回的構(gòu)造器創(chuàng)建一個組件的實例,有兩個參數(shù).;
參數(shù)1:組件名字,參數(shù)2:組件構(gòu)造器

 注意:
      模板template中只能有一個根節(jié)點

    組建的名字采用駝峰命名的話,使用時,就要加上"-"; 例如:組件名字indexA-->index-a;

## 第二種:
 + Vue.component('indexB',{模板})

## 第三種:
 + 通過制定模板創(chuàng)建,在Vue管轄范圍之外定義模板

## 總結(jié):
 + 先制造一個模板,在創(chuàng)建組件

## 組件中使用指令:
 + 在Vue.component()里邊,有template模板,有data()函數(shù),有methods()方法
+ 注意:data()必須是一個個函數(shù).不能使用屬性定義;函數(shù)里邊return出去一個對象

## 父組件傳值給子組件的方法

* 先創(chuàng)建好父組件和子組件
* 在父組件的模板中的son,子組件標(biāo)簽里綁定 :屬性 = 父組件需要傳遞的數(shù)據(jù);
 * 在子組件的son{}中  使用props來接收父組件傳遞過來的數(shù)據(jù);
 * props后跟一個數(shù)組,數(shù)組中是一個個字符串,這些字符串可以當(dāng)成屬性使用,即props:['屬性名']

 * 代碼如下:

    *

Vue.component('father',{
 template:'<div>....<son :myName="mySonName"></son></div>',
 data(){
 return{
 mySonName:'小明'
 }
 },
 //子組件
 components:{
 son:{
 props:['myName'],
 template:'...{{myName}}'
 }
 }
 })

 ## 子組件傳值給父組件的方法
* 先創(chuàng)建好父組件和子組件;

* 在子組件methods方法中使用this.$emit()方法,
     * 這個方法有兩個參數(shù);參數(shù)1:需要與父組件交換事件名稱,參數(shù)2:要傳遞的數(shù)據(jù);

* 在父組件模板的son標(biāo)簽中使用方法名的傳遞:

即,@tellFatherMyname = "getMySonName";

* 在父組件的methods方法中傳入data參數(shù),這個data=子組件傳遞過來的數(shù)據(jù),然后讓mySonName = data;*

代碼如下:     

<div id="app">
 <father></father>
 </div>
 <script>
 Vue.component('father',{
 template:`<div>
 <p>我的兒子告訴我他叫{{mySonName}}</p>
 <son @tellFatherMyname="getMySonName"></son>
 </div>`,
 data(){
 return {
 mySonName:'???'
 }
 },
 methods:{
 getMySonName(data){
 console.log(data);
 this.mySonName = data;
 }
 },
 components: {
 son:{
 data(){
 return {
 myName :'小明'
 }
 },
 template:`
 <button @click = "emitMyname">點擊就告訴父親我叫{{myName}} 
 </button>`,
 //在子組件的methods中使用this.$emit()來傳遞值;
 //$emit()有2個參數(shù);參數(shù)1:需要交換的事件名,參數(shù)2:要傳遞的數(shù)據(jù);例 
 如:this.name
 methods:{
 emitMyname(){
 this.$emit('tellFatherMyname',this.myName)
 }
 }
 }
 }
 })
 var vm = new Vue({
 el:'#app',
 data:{
 }
 })
 </script>

### 兄弟組件的創(chuàng)建和傳值:

 * 創(chuàng)建兄弟組建時,先創(chuàng)建好父組件,然后在子組件中創(chuàng)建son組件 和 daughter組件;
 * 接下來是 son組件 和daughter組件之間傳值;
 *  dau --> son傳值

* 在dau中 先通過事件總線發(fā)射一個事件名稱和要傳遞的數(shù)據(jù);即eventbus.$emit('事件名稱','數(shù)據(jù)')
     *  事件總線:

var eventbus = new Vue();

* 在 son 中先寫一個鉤子函數(shù),再通過eventbus.$on('事件名稱',data=>{})方法去監(jiān)聽,接收兄弟節(jié)點發(fā)射過來的事件
*  $on()有兩個參數(shù),參數(shù)1:事件名稱;參數(shù)2:函數(shù),函數(shù)的默認(rèn)值是傳遞過來的數(shù)據(jù)* 代碼如下:
     * 

<div id="app">
 <!-- 在此處渲染到頁面上 -->
 <father></father>
 </div>
 <script>
 //先創(chuàng)建一個vue空實例,作為事件總線
 var eventbus = new Vue();
 Vue.component('father',{
 //組件顯示的模板
 template:`<div>
 <son></son>
 <daughter></daughter>
 </div>`,
 components: {
 son:{
 data(){
 return {
 mySisterName:'???'
 }
 },
 //組件顯示的模板
 template:'<p>我的妹妹告訴我她叫{{mySisterName}}</p>',
 //采用鉤子函數(shù)
 //在鉤子函數(shù)中通過eventbus.$on('同一個事件名稱',data)來接收傳遞過來的數(shù)據(jù)
 mounted(){
 eventbus.$on('tellBroMyName',data=>{
 this.mySisterName = data;
 })
 }
 },
 daughter:{
 data(){
 return {
 myName:'蘭蘭'
 }
 },
 template:'<button @click="emitMyName">點擊就告訴哥哥我叫{{myName}}</button>',
 methods:{
 //只要點擊按鈕,就將事件和數(shù)據(jù)一起傳遞過去
 emitMyName(){
 eventbus.$emit('tellBroMyName',this.myName)
 }
 }
 }
 }
 })
 var vm = new Vue({
 el:'#app',
 data:{
 }
 })
 </script>

總結(jié)

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com