Vue自定義組件-屬性使用

• 2019 年 12 月 11 日
• 筆記

自定義組件Button

<template>    <button>      <span>{{ msg }}</span>    </button>  </template>    <script>  export default {    props: {      msg: {        default: '下載'      }    }  }  </script>

組件使用

<template>    <div id="myButton">      <ex-btn :msg="msg1"></ex-btn>      <ex-btn v-bind:msg="msg2"></ex-btn>      <ex-btn msg="按鈕"></ex-btn>    </div>  </template>  <script>  // 引入自定義組件  import btn from '@/components/demo/button.vue'  export default {    name: 'myButton',    components: {      'ex-btn': btn    },    data: function () {      return { msg1: '變數1', msg2: '變數2', msg3: '變數3' }    }  }  </script>