1：呼叫元件，並且通過自定義屬性向子元件傳入keywork，keywork1兩個值,傳Child事件

<input-box v-model:modelkey="keywork" v-model:modelkey1="keywork1" @showChild="Child"> </input-box> 2：子元件通過props獲取傳過來的值   props:["modelkey","modelkey1"] 3:還可以通過$emit('update:modelkey1',$event.target.value)把值回傳給父元件,實現子元件和父元件資料的雙向繫結 <input type="text" :value="modelkey1" @input="$emit('update:modelkey1',$event.target.value)" placeholder="輸入內容"/> 4：通過this.$emit('showChild','111','3333')"的方式呼叫父元件傳過來的Child事件 <button @click="this.$emit('showChild','111','3333')">彈框</button> 完整程式碼： 父元件程式碼： <template> 自定義元件屬性資料雙向繫結:<br/> <input-box v-model:modelkey="keywork" v-model:modelkey1="keywork1" @showChild="Child"> </input-box> <br/>   {{this.keywork}}   <br/>   {{this.keywork1}} </template> <script> import childbox from './child.vue' export default {   name: "AppA7",   data() {     return {         keywork:"女裝1",         keywork1:"男裝",     };   },   components: {   "input-box":childbox   },   methods: {      Child(data,data1){         alert(data+"  "+data1)      }   }, }; </script>   子元件程式碼：
<template> <input type="text" :value="modelkey" @input="$emit('update:modelkey',$event.target.value)" placeholder="輸入內容"/> <input type="text" :value="modelkey1" @input="$emit('update:modelkey1',$event.target.value)" placeholder="輸入內容"/> <br/> <button @click="this.$emit('showChild','111','3333')">彈框</button> </template> <script> export default {   name: "AppA7",   data() {     return {     };   },   mounted() {},   props:["modelkey","modelkey1"] }; </script>