# 子組件代碼 ``` <template> 我是首頁 <br/> <v-input v-model:keyword="keyword"></v-input> {{keyword}} <br> //多給model 綁定組件 <v-username v-model:firstName="firstName" v-model:lastName="lastName"></v-username> {{firstName}} -{{lastName}} </template> <script> import ItyingInput from './Input'; import usename from './useName'; export default { data() { return { keyword: "女裝", firstName: "", lastName: "", } }, methods: { }, //組件掛載 components: { "v-input": ItyingInput, "v-username": usename, } } </script> ``` # 父組件 ``` <template> <input type="text" :value="firstName" @input="$emit('update:firstName',$event.target.value)" placeholder="請輸入內容" /> <input type="text" :value="lastName" @input="$emit('update:lastName',$event.target.value)" placeholder="請輸入內容" /> </template> <script> export default { props: ["firstName","lastName"] } </script> <style lang="scss"> input { width: 400px; height: 32px; line-height: 32px; } </style> ```