建筑工程承包网址大全_广西平台网站建设设计_网站首页的优化_淘宝流量助手平台

重点：如何控制组件的显示隐藏

父组件中引用子组件时，需要接收一个自定义函数控制crisisListVisiable 变量

如代码中的：@update:newVisiable="newVisiable= $event"

父组件
<template><div><el-button @click="open">打开子组件</el-button>//引用子组件，使用v-if是因为需要每次打开子组件都走mounted函数<newComv-if="newVisiable":newVisiable="newVisiable"@update:newVisiable="newVisiable= $event"/></div>
</template>
<script>import newComfrom "@/views/newCom.vue";export default {components: {newCom},data(){newVisiable: false,},methods:{open(){this.newVisiable= true}}}
</script>

子组件：通过子传父，触发父组件的方法，更新显示隐藏状态。

如代码中的this.$emit("update:newVisiable", false);

<template><el-dialog:title="'子组件'":visible.sync="newVisiable":close-on-click-modal="false":modal="false"@closed="handleDialogClosed"><div>内容------------</div></el-dialog>
</template>
<script>export default {props: {newVisiable: {type: Boolean,default: false,},methods:{handleDialogClosed() {this.$emit("update:newVisiable", false);},}}
</script>