如果传递了Function prop，VueJS 2会显示一些HTML

Question

问题

在VueJS 2中，如果将函数道具传递给组件，如何显示一些HTML。

实施例

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

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

我可以通过传递一个单独的道具来关键v-if off，但我试图这样做就是一个道具。

我为这个问题创建了一个小提琴here

Answer 1

应该有效，

您可以使用!== undefined

添加更多定义

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

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

但如上所述，这应该已经有效，所以你的错误可能在其他地方。

看到你的代码后，我看到了问题所在。这是一个案例问题

使用:back-btn代替:backBtn

只有在您仅使用vue运行时（没有编译）

时才会发生这种情况

在这里阅读更多内容： https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

你也可以通过仅传递函数来解决它

https://jsfiddle.net/rz6hyd7b/7/

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>
  `
});