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>