Vue组件

VUE组件

全局组件

注意事项

• 组件中的data必须是一个函数，这样就能让各个组件的数据独立。
• template必须有个明确的根元素，简单说就是最外层必须是一个标签，还可以使用ES6模板语法
• 可以是用短横线的方式命名,也可以使用驼峰的方式(驼峰的方式,在组件的模板中可以直接使用，但是在vue的html代码中必须使用横线的方式使用)

// 注册组件
// Vue.component('BtnCounter',function(){
Vue.component('btn-counter',function(){
    // 组件中的data必须是一个函数
    data: function(){
        retrun {
            count: 0
        }
    },
    // template必须有个明确的根元素，简单说就是最外层必须是一个标签
    // template: '点击了{{count}}次',
    template: '点击了{{count}}次',
    methods: {
        handle: function(){
            this.count++;
        }
    }
});
    
// 组件使用

    

局部组件

局部组件只能在注册它的父组件中使用

• 方式1

  const HelloWorld = Vue.extend({
  template: '
  {{ msg }}
  ',
  data: function () {
    return {
        msg: 'helloworld'
    }
  }
  })
  
  var vm = new Vue({
    el:'#app',
    data: {
        
    },
    components: {
        'hello-world': HelloWorld
    }
  });
    
  
    
  

• 方式2(这是方式1的简写版本，看似没有调用extend，但是其实vue在底层帮你调用了)

  var HelloWorld = {
    data: function(){
        retrun {
            msg: 'helloworld'
        }
    }
    template:'
  {{msg}}
  '
  }
    
  var vm = new Vue({
    el:'#app',
    data: {
        
    },
    components: {
        'hello-world': HelloWorld
    }
  });
    
  
    
  

单文件组件

// 子组件




// 父组件

父子组件传值

父传子

使用props，详见props介绍

子传父

1.函数形式

// 子组件



// 父组件

2. 自定义事件形式

   // 子组件
   
   
   
   
   // 父组件
   
   
   

3. ref获取数据

   // 子组件和第二种方式一样的
   
   // 父组件