Vue组件、组件传值和组件插槽

Vue组件、组件传值和组件插槽

一、Vue组件：

1.组件 (Component) 是 Vue.js 最强大的功能之一，通过组件可以扩展 HTML 元素，封装可重用的代码；
2.组件是可复用的 Vue 实例，与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等
3.组件注册：
3.1 组件参数的data值必须是函数 同时这个函数要求返回一个对象
3.2 组件模板必须是单个根元素
3.3 组件模板的内容可以是模板字符串
3.4 组件可以重复使用多次 ；因为data中返回的是一个对象所以每个组件中的数据是私有的，即每个实例可以维护一份被返回对象的独立的拷贝
3.5 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件；
命名：Vue.component(‘HelloWorld’…
使用：< hello-world >
a.全局注册
a.1 全局组件注册后，任何vue实例都可以用

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
     <hello-world></hello-world>
  </div>
<script type="text/javascript">
     Vue.component('HelloWorld', {
   
      data: function(){
   
        return {
   
          msg: 'HelloWorld'
        }
      },
      template: '<div>{
   {msg}}</div>'
    });
    Vue.component('button-counter', {
   
      // 1、
      data: function(){
   
        return {
   
          count: 0
        }
      },
   // 2、组件模板必须是单个根元素;组件模板的内容可以是模板字符串  
      template: `
        <div>
          <button @click="handle">点击了{
    {count}}次</button>
          <button>测试123</button>
			#  6 在字符串模板中可以使用驼峰的方式使用组件	
		   <HelloWorld></HelloWorld>
        </div>
      `,
      methods: {
   
        handle: function(){
   
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
   
      el: '#app',
      data: {
   
      }
    });
  </script>

b.局部注册：只能在当前注册它的vue实例中使用

//定义：
//对应组件名的实际组件
var HelloWorld = {
   
  data: function(){
   
    return {
   
      msg: 'HelloWorld'
    }
  },
  template: '<div>{
   {msg}}</div>'
};
//局部注册组件名
var vm =