## 創建組件的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組件創建和傳值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
