Vue自定义组件-属性使用

自定义组件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>