全局组件

  1. //DOM
  2. <tagname></tagname>
  3. //JS 
  4. Vue.component('tagname', 
  5.    {template:'html结构'}
  6. );

局部组件

  1. 只有header才能用的组件
  2. var header = new Vue({
  3.         el: '#header',
  4.         //子组件必须声明后使用，不然不能起效
  5.         components: {
  6.           '组件名': 组件object,
  7.         },
  8.  });

组件之间的信息传递

父传子

  1. //组件
  2. Vue.component('child', {
  3.   // 声明 props
  4.   props: {
  5.           message:{
  6.           type:string,//数据类型
  7.         required:true,//必填
  8.         default:"liu"//默认值
  9.       }
  10.   },
  11.   data(){
  12.     return{
  13.     }
  14.   },
  15.   template: '<span>{{ message }}</span>'
  16. })
  18. //父级
  19. <child message="传递内容"></todo-item>

子传父