1.初识vue.js button组件

1.html的button标签

<button>click me</button>

2.my-button组件

创建自己的button标签 <my-button>，并传入文本。

<my-button>click me</my-button>

但缺失了浏览器预先定义的样式。

引入Vue.js并创建my-button组件，注册组件，以及创建一个新的 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

全局注册和局部注册，二者选其一

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="module">
  var myButton = {
    template: '<button>click me</button>',
  }
  // 全局注册
  Vue.component('my-button', myButton)
  new Vue({
    el: '#app',
    // 局部注册
    // components: {myButton}
  }) 
</script>

现在可以使用my-button标签且显示浏览器默认button样式

3.自定义text

我们希望组件的文本内容是可修改

删除myButton组件template属性值中的文本click me，并使用模板语法{{}}

在组件的data属性中可以传入text的值

注：不能在vue实例的data属性中传入text的值，因为vue的实例是根组件，根实例。

组件即是vue的实例。

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="module">
  var myButton = {
    template: '<button>{{ text }}</button>',
    data() {
      return {
        text: 'click me'
      }
    } 
  }
  // 全局注册
  Vue.component('my-button', myButton)
  new Vue({
    el: '#app',
    // 局部注册
    // components: {myButton}
  }) 
</script>

但是我们希望在使用my-button组件标签时定义文本，而不是去修改组件的data属性。

使用组件的props属性。props属性的值可以使得组件标签带有自定义的属性。

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="module">
  var myButton = {
    template: '<button>{{ text }}</button>',
    props: ['text']
  }
  // 全局注册
  Vue.component('my-button', myButton)
  new Vue({
    el: '#app',
    // 局部注册
    // components: {myButton}
  }) 
</script>

现在使用my-button组件标签可以指定文本内容

<my-button text="click me"></my-button>

4.组件插槽

将组件内的模板语法替换为slot标签，该标签会在组件渲染时被替换。

var myButton = {
  template: '<button><slot></slot></button>'
}

现在不需要使用my-button标签属性定义内容。

<div id="app">
  <my-button>click me</my-button>
  <my-button>close me</my-button>
</div>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script>
  var myButton = {
    template: '<button><slot></slot></button>'
  }
  Vue.component('my-button',myButton)
  new Vue({
    el: '#app'
  })
</script>