vue.js组件

组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展HTML元素,封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素.
Vue.js的组件的使用有3个步骤:创建组件构造器,注册组件和使用组件.

• 组件的创建和注册

• 全局注册和局部注册
  • 用Vue.component()注册组件时,组件的注册是全局的.(构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。)
  • 如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册.

Vue.component('header-component', {
  template: '#header',
  // template: '
head
',
  data() {
    return {
      msg: 'head'
    }
  }
})
var child = {
  template: '
h2
'
}
new Vue({
  el: '#app',
  data: {
    name: 'tt'
  },
  components: {
     'child-component': child
  }
})

• 父组件和子组件

  var ChildOne = {
    name: 'one',
    template: '
自定义局部组件 1
',
    components: {
      'two-component': ChildTwo
    }
  }

  var Parent = {
    name: 'parent',
    template: '
{{content}}父组件
',
    data() {
      return {
        message: '父组件66666666'
      }
    },
    components: {
      'one-component': ChildOne
    }
  }

  var vm =  new Vue({
    el: '#app',
    components: {
      'parent-component': Parent
    },
    data: {
      'content': 1
    }
   });

• prop传递数据
  • 使用prop,子组件获取父组件的数据
  • prop是单向绑定,当父组件的属性变化时,将传导给子组件,但是反过来不会

var son = {
    props: ['sonmsg'],
    template: '{{sonmsg}}'
}
Vue.component('child', {
    props: ['msg'],
    template: '
{{msg}}
',
    components: {
        'son': son
    }
})
new Vue({
    el: '#app',
    data: {
        'name': 123
    }
})