方法一 使用.sync修饰符css
element就是使用的这种方式,实现方式以下:html
父组件:this
<template> <div id="demo"> <test-model :show.sync="showFlag"></test-model> </div> </template> <script> import testModel from 'src/components/testModel' export default { data(){ return{ showFlag: false } }, components: { testModel, } } </script> <style lang="scss" scoped> </style>
子组件:code
<template> <div v-if="show"> <button @cilck="closeShow"></button> </div> </template> <script> export default { data(){ return{ } }, props: ["show"], methods: { closeShow() { this.$emit("update:show",false); } }, } </script> <style lang="scss" scoped> </style>
子组件经过this.$emit("update:show",false); 能够直接将父组件传过来的show值改变,从而达到显示隐藏的目的。component
方法二 使用v-modelhtm
父组件事件
<template> <div id="demo"> <test-model v-model="show"></test-model> </div> </template> <script> import testModel from 'src/components/testModel' export default { data(){ return{ show: false } }, components: { testModel, } } </script> <style lang="scss" scoped> </style>
子组件ip
<template> <div v-if="value"> <button @cilck="closeShow"></button> </div> </template> <script> export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', event: 'balabala' }, methods: { changeShow() { this.$emit("balabala",false); } }, } </script> <style lang="scss" scoped> </style>
官方文档里有写,一个组件上的 v-model
默认会利用名为 value
的 prop 和名为 input
的事件,可是像单选框、复选框等类型的输入控件可能会将 value
特性用于不一样的目的。model
选项能够用来避免这样的冲突,因此上面的子组件里,咱们用balabala来替换掉了本来的input事件,因此在$emit的时候,里面的事件名应为balabala,不然默认为input.ci