第一部分、利用props將資料傳給components使用 (父元件→子元件)
1. 子元件的設定
首先有一個子元件(child component),我們設定一個props為userName,型態為String,如果data內的參數,你可以直接在模板裡用{{ userName }}印出,或在function內以this.userName來進行操作。
template的內容是以顯示userName在一個HTML的輸入框裡
// Child Component Vue.component("child-input", { template: ` <div> <label>Name</label> <input v-model="childUserName" type="text"/> </div> `, props: { // camelCase in JavaScript userName: String }, data: function() { return { childUserName: this.userName }; } });※Vue會警告你盡量不要直接修改props參數的值,因此我們設定了childUserName來避免這個問題。
警告內容:
"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value."
2. 父元件的設定
在HTML裡要用user-name來傳值,也就是說component的命名法遵循camelCase,到HTML內時則是用kebab-case來識別。
user-name和:user-name兩者的用法不同,如果是user-name="initial_input",會把"initial_input"當成字串傳過去,如果前面加上冒號「:」變成:user-name="inital_input",則是把inital_input這個參數的值傳過去。
// HTML <div id="app"> <!-- kebab-case in HTML --> <child-input :user-name="initial_input"></child-input> </div>
// JS new Vue({ el: "#app", data: function() { return { initial_input: "Annie", }; } });
第二部分、利用emit將components的資料回傳 (子元件→父元件)
1. 子元件的設定
延續第一部分,我們在methods內新增一個sendToParent的function,@input="sendToParent"代表我們觸發的時機。
看一下sendToParent內容,$emit後面第一個參數"update-text",代表設定一個update-text的事件,第二參數是同時把childUserName這個參數傳出去,如果需要傳更多的參數,直接用逗號分隔接在後面。
Vue.component("child-input", { template: ` <div class="form-group mt-3"> <label>Name</label> <input v-model="childUserName" @input="sendToParent" type="text"/> </div> `, props: { userName: String }, data: function() { return { childUserName: this.userName }; }, methods: { sendToParent: function() { this.$emit("update-text", this.childUserName); } } });
2. 父元件的設定
父元件的部分也新增一個getChildText的function來接收子元件的資料,當子元件觸發'update-text'時,就會執行getChildText來接收傳送的值,value就是從子元件傳來的childUserName。如果傳多個值,記得在這邊填相應數量的參數來接收。
// JS new Vue({ el: "#app", data: function() { return { initial_input: "Annie", }; }, methods: { getChildText: function(value) { this.initial_input = value; } } });
// HTML <div id="app"> <child-input :user-name="initial_input" @update-text="getChildText"></child-input> </div>
完整的程式碼請參考codepen上的範例:
See the Pen
Sending Messages between Parent and Child by chenuin (@chenuin)
on CodePen.
相關文章: