Vue 父子元件的通訊

Miss木不發表於2019-01-11
Vue元件

關鍵詞： props slot emit

父元件向子元件傳遞資料

關鍵詞： props
準備工作：

  1. 父元件
var App = {
    componnets: {
        son: Son
    },
    template: `<div><son></son></div>`,
    data() {
        return {
            obj: 'abc'
        }
    }
}
複製程式碼
  1. 子元件
var Son = {
    template: `<div><h1>This is Son!<h1></div>`
}
複製程式碼

3.子元件需要父元件的資料 obj
(1)繫結obj:

var App = {
    componnets: {
        son: Son
    },
    template: `<div><son :obj="obj"></son></div>`,
    data() {
        return {
            obj: 'abc'
        }
    }
}
複製程式碼

(2)子元件用props接收obj,子元件接收後就可以通過this.obj使用：

var Son = {
    template: `<div><h1>This is Son!<h1></div>`,
    prpos:{
        obj: Object
    }
}
複製程式碼
  • 子元件在接收父元件的資料時，可以指定型別驗證
  • 在繫結資料時，不要使用駝峰命名，因為在HTML中是不區分大小寫的，推薦使用kebab-case寫法
  • 一般來說，如果子元件需要操作props中的值，需要將props中的值賦值給本地定義的屬性
  • 在子元件使用watch監聽props中的陣列，不能對陣列進行改變，否則，vue會發出警告產生無限更新迴圈的問題。

父元件向子元件傳遞dom

關鍵詞：slot 使用slot內建元件可以實現父元件向子元件傳遞dom。 示例：

var Son = {
    template: `<div><h1><slot></slot></h1></div>`,
    props: {
        obj：Object // 驗證型別
    }
}
// 父元件
var App = {
    componnets: { //宣告要用的元件
    son: Son  //key是元件名，value是元件物件
    }
    template: '<div><son :obj="obj"><p>This is slot!</p></son></div>', //入口元件
    data() {
        return {
                obj: 'abc'
        }
    }
}
複製程式碼

具名插槽：有的情況下可能需要多個插槽，則可以使用slot屬性的name屬性。

子元件呼叫父元件的方法

關鍵詞：this.$emit 子元件使用this.$emit呼叫父元件的方法，同時可以根據需要傳遞對應的引數。 示例：

var Son = {
    template: `<div @click="sendMessage">{{ msg }}</div>`,
    props: {
        obj：Object // 驗證型別
    },
    data () {
        return {
            msg: "send message"
        }
    },
    methods: {
        sendMessage () {
            this.$emit('showMessage', this.msg)
            // send message
        }
    }
}
// 父元件
var App = {
    componnets: { //宣告要用的元件
    son: Son  //key是元件名，value是元件物件
    }
    template: '<div><son :obj="obj" @showMessage="showMessage"></son></div>', //入口元件
    data() {
        return {
                obj: 'abc'
        }
    },
    methods: {
        showMessage (params) {
            console.log(params)
        }
    }
}
複製程式碼

步驟：

  1. 在父元件中繫結showMessage方法：@showMessage="showMessage"
  2. 在子元件中使用this.$emit('showMessage',this.msg)呼叫父元件的方法，其中第一個引數為方法名，後面的參數列示子元件向父元件傳遞的引數。

相關文章