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>