代码之家 › 专栏 › 技术社区 › Michael Warner

如果传递了函数属性,Vuejs 2将显示一些HTML

vuejs2 javascript

Michael Warner · 技术社区 · 6 年前

问题

在VueJS2中,如果向组件传递了函数属性,如何显示一些HTML。

例子

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

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

我可以通过传递一个单独的道具来关闭V-IF,但我正在尝试这样做,只有一个道具。

我为这个问题做了一把小提琴 here

1 回复 | 直到 6 年前

Daniel 6 年前

这应该有效,

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前