怎么在Vue中創建組件和傳值

怎么在Vue中創建組件和傳值？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

## 創建組件的3種方法

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

 注意:
      模板template中只能有一個根節點

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

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

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

## 總結:
 + 先制造一個模板,在創建組件

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

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

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

 * 代碼如下:

    *

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

 ## 子組件傳值給父組件的方法
* 先創建好父組件和子組件;

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

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

即,@tellFatherMyname = "getMySonName";

* 在父組件的methods方法中傳入data參數,這個data=子組件傳遞過來的數據,然后讓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個參數;參數1:需要交換的事件名,參數2:要傳遞的數據;例 
            如:this.name
          methods:{
            emitMyname(){
              this.$emit('tellFatherMyname',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>

### 兄弟組件的創建和傳值:

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

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

var eventbus = new Vue();

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

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

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

關于怎么在Vue中創建組件和傳值問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。