Vue自定义组件中v-if访问属性失效，点击显示div异常如何解决？

嘿，我刚好碰到过类似的问题，来帮你捋捋！

核心原因是Vue组件拥有独立的作用域，和你之前用的根Vue实例作用域完全隔离了。

在常规HTML+Vue环境里，你可能直接把isVisible这类状态变量挂在根实例上，点击事件也直接调用根实例的方法——这种情况下，模板和状态是同属一个作用域的，自然能正常触发。但封装成自定义组件后，组件内部的模板只能访问组件自己定义的数据、方法和props，没法直接拿到父组件（或根实例）里的变量/方法。如果你的组件模板里还在引用外部作用域的状态或方法，那点击“Create Test”时，组件根本找不到对应的逻辑，自然就没反应了。

要让组件能正常工作还能复用，得把组件的状态和逻辑“封装”到组件内部，或者通过Vue的组件通信机制来处理，分两种场景给你方案：

场景1：组件自己管理显示状态（最常用，完全独立复用） #

把状态变量和点击事件处理函数都放到组件内部，而且组件的data必须是函数（这样每个组件实例都有独立的状态，不会互相影响）：

Vue.component('test-creator', {
  template: `
    <div>
      <span @click="toggleShow">Create Test</span>
      <div v-show="isVisible" class="hidden-div">这是隐藏的内容</div>
    </div>
  `,
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggleShow() {
      this.isVisible = !this.isVisible;
    }
  }
})

这样不管你在页面里用多少次<test-creator></test-creator>，每个组件的显示状态都是独立的，点击自己的“Create Test”只会影响自己的隐藏div，完美复用。

场景2：父组件统一控制显示状态 #

如果需要父组件来管多个组件的显示状态，可以用props传状态，$emit触发事件通知父组件修改：

Vue.component('test-creator', {
  props: ['isVisible'],
  template: `
    <div>
      <span @click="$emit('toggle-test')">Create Test</span>
      <div v-show="isVisible" class="hidden-div">这是隐藏的内容</div>
    </div>
  `
})

然后在父组件（或根实例）里使用：

<test-creator :is-visible="showTest" @toggle-test="showTest = !showTest"></test-creator>

new Vue({
  el: '#app',
  data: {
    showTest: false
  }
})

这种方式适合需要全局控制的场景，同样能保证组件的复用性。

总结一下，关键就是要尊重Vue组件的作用域隔离规则，把组件该管的逻辑放在自己内部，或者用props/事件和外部通信，这样功能就能正常工作，组件也能放心复用啦～

内容的提问来源于stack exchange，提问作者josefdev