VueJS 2如何通过函数Prop控制组件内HTML元素的显示

嘿，这事儿其实比你想的简单——你完全不需要额外加prop，直接用这个Function类型的prop本身就能同时实现“显示判断”和“触发逻辑”的功能。

先看修正后的组件代码：

<template>
  <!-- 只要父组件传了backBtn函数，这个元素就会渲染 -->
  <div v-if="backBtn" @click="backBtn">Back Button</div>
</template>
<script>
export default {
  props: {
    backBtn: Function
  }
}
</script>

哦对了，你原来代码里用$emit('backBtn')是没必要的，因为backBtn已经是父组件传过来的函数引用了，直接在点击事件里调用它就行（甚至可以直接写@click="backBtn"，Vue会自动帮你处理函数调用）。

这里的核心逻辑是：

• 在JavaScript中，一个已定义的函数属于truthy值，所以v-if="backBtn"会在父组件传递了这个函数时成立，元素就会显示；如果没传，backBtn是undefined（falsy值），元素就不会渲染。
• 点击时直接执行backBtn函数，就能触发父组件里对应的逻辑，完美达成你的需求。

给你个父组件的使用例子参考：

<template>
  <YourComponent :backBtn="handleBack" />
</template>
<script>
import YourComponent from './YourComponent.vue'

export default {
  components: { YourComponent },
  methods: {
    handleBack() {
      // 这里写你的回退逻辑，比如路由跳转或者状态更新
      this.$router.go(-1)
    }
  }
}
</script>

这样就完全依靠单个Function类型的prop实现了所有功能，不需要额外的判断字段~

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