时间戳

首页 > 解决方案 > 如果传递了 Function 道具，VueJS 2 会显示一些 HTML

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

问题描述

问题

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

例子

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

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

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

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

标签： javascriptvuejs2

解决方案

那应该工作，

您可以添加更多定义!== 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>
  `
});

推荐阅读