Javascript 如果传递了函数属性，VueJS 2将显示一些HTML 问题:

在VueJS 2中，如果函数属性被传递到组件，如何显示一些HTML

例子

后退按钮
导出默认值{
道具：{
backBtn：函数
}
}

我可以通过传递一个单独的道具来关闭v-if，但我正试图通过一个道具来实现这一点

我为这一期制作了一把小提琴，应该有用

您可以使用

！==未定义

<template>
  <div v-if="backBtn !== undefined" @click="$emit('backBtn')">Back Button</div>
</template>

<script>
  export default {
    props: {
      backBtn: {
        type: Function,
      },
    }
  }
</script>

---

我同意这看起来应该行得通，但出于某种原因，它行不通。我创建了一个提琴来验证是否有更多的定义和删除环境有任何效果，但它没有。先生，您为我指出了正确的方向，正如@AbM所说的，使用v-bind（：）可以传递函数。工作小提琴虽然这取决于您的使用，但您可以通过仅将函数作为道具传递，而无需定义

bind

和

prop

。基于这个问题，我认为这就是你想要实现的。要通过道具，你需要

：backBtn=“btnClicked”

，而不是

@backBtn=“btnClicked”

（即

：

，而不是

@

）。在您的情况下，您还需要

@backBtn

，因为您还发出一个具有该名称的事件（但不确定原因）。您是正确的，我将解决该问题，但问题仍然存在。如果您查看控制台，会出现警告：

[warning][Vue warn]：Attribute:backBtn在组件上被忽略，因为该组件是片段实例：http://vuejs.org/guide/components.html#Fragment_Instance

因此您需要

：back btn=“btnClicked”

我重构了小提琴，以便您始终可以看到单击事件工作。所以我们可以排除这种可能性。

<template>
  <div v-if="backBtn !== undefined" @click="$emit('backBtn')">Back Button</div>
</template>

<script>
  export default {
    props: {
      backBtn: {
        type: Function,
      },
    }
  }
</script>

Vue.component('my-btn', {
  props: {
    backbtn: {
      type: Function
    }
  },
  template: `
    <div>
        <div v-if="backbtn" @click="backbtn">Back Button</div>
    </div>
   `
})

var vm = new Vue({
  el: '#app',
  components: 'my-btn',
  methods: {
        btnClicked: function(){
      console.log('adsf')
    }  
  },
  template: `
  <div>
      Show Btn => <my-btn :backbtn="btnClicked"></my-btn>
      </br>
      Hidden Btn => <my-btn></my-btn>
  </div>
  `
});