javascript - 如果传递了 Function 属性，VueJS 2 会显示一些 HTML

Question

问题

在 VueJS 2 中，如果将 Function 属性传递给组件，如何显示一些 HTML。

示例

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

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

我可以通过传递一个单独的 Prop 来关闭 v-if 来实现这一点，但我正在尝试通过一个 Prop 来做到这一点。

我为此问题创建了一个 Fiddle here

Answer 1

应该可以，

您可以使用添加更多定义!==未定义

<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://v2.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>
  `
});