VueJS 2 показывает некоторый HTML, если пропущена функция Function

Question

Вопрос

В VueJS 2, как вы показываете некоторый HTML, если пропущена функция Function для компонента.

Пример

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

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

Я могу сделать это с помощьюпропускаю отдельную подпорку, чтобы выключить v-if, но я пытаюсь сделать это с помощью одной подпорки.

Я создал скрипку для этой проблемы здесь

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 runtime (без компиляции)

подробнее здесь: 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>
  `
});