vue.js - 子组件如何改变父组件中其他标签的v-if值呢

问题描述

问 题

如题，做东西出现难题，我想在普通父子组件中子组件设置methods，父组件标签设置v-if，通过子组件函数控制父组件隐藏，问下可否实现呢

解决方案

普通的做法是使用子组件emit自定义事件父组件监听自定义事件的方式

例子

子组件child
<template>
    <button @click="add"></button>
    <!-- 你应该知道v-on:click的简写就是@click吧... -->
</template>
<script>
    export default {    
        methods: {
            add: function () {
                this.$emit('plus') // plus是自定义事件名字
            }
        }
    }
</script>
父组件
<template>
    <child @plus="handlePlus(arguments)"></child>
</template>
<script>
    export default {    
        methods: {
            handlePlus: function (arguments) {
                // .....
            }
        }
    }
</script>

非父子组件 或者父组件想通知多个子组件 推荐Vuex或者Vue bus

Vue bus适用于简单的跨组件通信

var bus = new Vue() // 全局注册bus
// 在组件A中 触发事件
bus.$emit('id-selected', 1)
// 在组件B中 监听事件
bus.$on('id-selected', function (id) {
  // ...
})

更复杂的业务下，存在更多的跨组件通信，推荐Vuex
Vuex的做法是 在Vuex的store里设置一个状态量s，并设置能改变s的事务，组件A想要与B通信的话 A提交事务改变s 而B使用watch来监控s的变化 一旦s变化 B根据s的值做出反应

逼不得已的情况下 可以但是不推荐使用 vm.$parent 这个虽然方便简单粗暴，但是增大了组件之间的耦合，原则上两个组件之间不应该知道对方有什么，而是通过事件或者状态管理(Vuex）来沟通

这篇关于vue.js - 子组件如何改变父组件中其他标签的v-if值呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！