vue组件部分介绍

组件的基本使用

注册组件
注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

Vue.component('mycomponent',{
    template: `<div>这是一个自定义组件</div>`,
    data () {
      return {
        message: 'hello world'
      }
    }
  })

如上方式已经创建了一个自定义组件，然后就可以在Vue实例挂在的DOM元素中使用它。

<div id="app">
    <mycomponent></mycomponent>
    <my-component></my-component>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-component': {
        template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
      }
    }
  })
</script>

直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件。

var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-component': {
        template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
      }
    }
  })

属性props

Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

 Vue.component('mycomponent',{
    template: `<div>父组件传递给我们的内容是：{{myMessage}}</div>`,
    props:[myMessage]
    data () {
      return {
        message: 'hello world'
      }
    }
  })