vue 再父子組件傳值時,除了傳統的父組件 :屬性去傳值外,還可以使用 父組件v-model傳值,子組件props['value']接收,而子組件也可以通過$emit('input',false),去改變父組件中v-model 和 子組件中 value 的值 。
<!--父組件--> <template> <test v-model = "isShow"></test> <button @click="isShow = !isShow">switch</button> </template> <script> import test from '../test'; export default { components: { test }, data() { return { isShow: false } } } </script>
<!--子組件--> <template> <div> <div>{{value}}</div> <Button @click="$emit('input',false)">關閉</Button> </div> </template> <script type="text/ecmascript-6"> export default { props:['value'], mounted() { console.log(this.value) } } </script>