Vue組件傳值

1. 父組件給子組件傳值, 利用props

父組件給子組件傳值, 利用props

1. 給子組件聲明一個props:[]，做用：用來接收父組件傳遞過來的值（數組裏面是字符串）
2. 父組件建立一個data變量，經過v-bind指令給子組件中的props傳值

1. 建立父子組件

2. 爲子組件聲明props, 它的做用是: 用於接收從父組件傳遞過來的值

   props:能夠跟一個數組,數組裏面的值 是一個一個的字符串(字符串形式能夠是對象, 數字, 布爾值等等),這個字符串能夠當成屬性來使用

3. 在使用子組件的地方, 經過v-bind指令給子組件中的props賦值

<div id="app">
	<father></father>
</div>
複製代碼

//建立一個father組件
Vue.component('father',{
    //2. 在使用子組件的地方, 經過v-bind指令給子組件中的props賦值
    template:'<div><p>我是父組件,我給我兒子起名叫{{mySonName}}</p><son :myName="mySonName"></son></div>',
    data () {
        return {
            mySonName:'小明'
        }
    },
    //經過components屬性建立子組件
    components: {
        //建立一個son組件
        son:{
            //1. 聲明props, 它的做用是: 用來接收從父組件傳遞過來的值
            //props:能夠跟一個數組,數組裏面的值 是一個一個的字符串,這個字符串能夠當成屬性來使用
            props:['myName'],
            template:'<p>我是子組件, 我爸爸給我取名叫{{myName}}</p>'  
        }
    }
})
複製代碼

2. 子組件給父組件傳值, 利用$emit

1. 建立父子組件

2. 子組件傳值給父組件須要用到$emit()方法,這個方法能夠傳遞兩個參數, 一個是事件名稱, 一個是須要傳遞的數據

3. 父組件須要監聽這個方法 @tellFatherMyName="getMySonName

4. 這個函數中有一個默認參數, 該參數就表示上傳上來的值

   Vue.component('father',{
       template:` <div> <p>父親年紀大了,記性很差,我兒子告訴我他叫{{mySonName}}</p> <son @tellFatherMyName="getMySonName"></son> </div> `,
       data() {
           return {
               mySonName:'???'
           }
       },
       methods:{
           //這個函數中有一個默認參數, 該參數就表示上傳上來的值
           getMySonName(data){
               this.mySonName = data
           }
       },
       components: {
           son:{
               template:'<button @click="emitMyName">點擊就告訴我爸爸 我叫{{myName}}</button>',
               data () {
                   return {
                       myName:'小明'
                   }
               },
               methods: {
                   emitMyName(){
                       //子組件傳值給父組件須要用到$emit()方法,這個方法能夠傳遞兩個參數
                       // 一個是事件名稱, 一個是須要傳遞的數據
                       this.$emit('tellFatherMyName',this.myName)
                   }
               },
   
           }
       }
   })
   複製代碼

   

3. 兄弟組件間傳值 利用eventBus

1. 建立父組件和兩個子組件
2. 兄弟組件傳值須要利用一個事件總線(相似中間橋樑)

//建立一個空的vue實例, 做爲事件總線
var eventBus = new Vue()
複製代碼

3. 組件二給組件一傳值

//1.建立一個空的vue實例, 做爲事件總線
var eventbus = new Vue()

Vue.component('father',{
    template:` <div> <son></son> <daughter></daughter> </div> `,
    components: {
        son:{
            template:'<span>我妹妹告訴我她叫{{mySisterName}}</span>',
            data() {
                return {
                    mySisterName:'???'
                }
            },
            mounted() {
                //3.經過eventbus.$on()方法去監聽兄弟節點發射過來的時間
                //$on有兩個參數, 一個是事件名稱, 一個是函數, 該函數的默認參數,就是傳遞過來的數據
                eventbus.$on('tellBroMyName',data=>{
                    this.mySisterName = data
                })
            },
        },
        daughter:{
            template:'<button @click="emitMyName">點擊就告訴哥哥,我叫{{myName}}</button>',
            data(){
                return {
                    myName:'蘭蘭'
                }
            },
            methods: {
                emitMyName(){
                    //2.經過事件總線發射一個事件名稱和須要傳遞的數據
                    eventbus.$emit('tellBroMyName',this.myName)
                }
            }
        }
    }
})
複製代碼