# 子组件代码 ``` <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> ```