Vue筆記——子元件向父元件傳遞資料
阿新 • • 發佈:2018-12-14
Vue專案中經常使用到元件之間的數值傳遞,實現的方法很多,但是原理基本上大同小異。 子元件向父元件出傳遞資料,使用自定義事件的方式。 父元件向子元件傳遞資料,使用props屬性的方式。
一、在子元件中自定義事件
我們可以從子元件中想父元件中傳遞多個數據,在子元件中要做的工作只是,使用this.$emit()
命令來自定義一個事件。該命令可以傳遞多個引數:
- 第一個引數是自定義事件的名字,是必須的
- 後面的引數是從子元件傳遞給父元件的資料,是可選的。要傳遞幾個資料,就將這幾個資料作為引數放進該命令中。
例如,我們要在子元件中自定義一個update事件,通過該事件向父元件傳遞兩條資料,使用的程式碼如下:
this.$emit("update",this.passDate1,this.passDate2)
這裡給出一個具體的例項:在子元件Child.vue中,定義了一個事件,子元件建立完成之後,向父元件傳遞鏈條資料。子元件Child.vue的完整程式碼如下:
<template> <div class="Child"> <h1>{{ message }}</h1> </div> </template> <script> export default { name: 'Child', data() { return { message: "我是子元件中的數值", passDate1: "我是子元件傳遞到父元件的數值1", passDate2: "我是子元件傳遞到父元件的數值2" } }, created: function () { // 元件建立完成之後,自定義事件,向父元件傳遞資料 this.$emit("update", this.passDate1, this.passDate2) } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1{ color: #000099; } </style>
二、在父元件中註冊該事件,並繫結父元件中的方法,接收資料
在子元件中完成自定義事件之後,我們就可以在父元件中註冊該事件,並繫結到父元件中的一個方法,在該方法中,接收子元件中傳遞過來的資料。父元件的完整程式碼如下:
<template> <div id="app"> <!-- 在父子元件的銜接處,繫結子元件自定義事件到父元件的函式 --> <Child v-on:update="receive"></Child> <h3>{{ value_1 }}</h3> <h3>{{ value_2 }}</h3> </div> </template> <script> // 引入子元件 import Child from './components/Child.vue' export default { name: 'App', components: { Child // 註冊子元件 }, data: function () { return { value_1: "", value_2: "" } }, methods: { // 父元件中響應子元件自定義的方法 // 此函方法的引數是用來接收從子元件傳遞來的資料 // 子元件傳遞了幾個資料,這裡就有幾個引數 receive: function (val_1, val_2) { this.value_1 = val_1; this.value_2 = val_2; } } } </script> <style> </style>