1.全局组件组件怎么注册？data返回的是什么？组件怎么使用？组件的数据是否独立？

2.组件必须要有根元素？组件的命名方式有哪两种？推荐用哪种？

3.局部组件怎么定义？使用范围？

4.vue的调试工具怎么用？

5.props数组的数据是干嘛的？

6.父组件怎么传值到子组件？

7.当子组件标签中number或者布尔 绑定和不绑定的区别？

8.子组件可以通过props直接操作父组件中的数据（数组/对象等）吗？

9.子组件通过自定义事件向父组件传递信息的方式？

10.非父子组件间的传值

11.插槽怎么使用？多个插槽呢？

12.具名插槽怎么定义以及使用？

13.作用域插槽怎么定义和使用？

答案

Vue.component('button-counter', {
    data: function () { 
      return {
        count: 0
      }
    },
    template: '点击了{{count}}次',
    methods: {
      handle: function () {
        this.count += 1;
      }
    }
  })

data 返回的是一个函数，每个组件的数据都是独立的

组件摸板不能是两个同级的元素。必须要有两个模板。

props命名规则：分为驼峰式（使用组件的适合，智能在字符串摸板字使用，在普通的标签摸板中使用，必须是短横线的方式）和横线式，推荐短横线的方法

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

局部组件只能在注册他的父组件中使用，别的地方不可以使用

用于接受父组件传值，在组件标签中绑定对应的值。

Vue.component('menu-item', {
      props: ['menuTitle'],
      template: '
{{menuTitle}}
'
    });

var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });

加上绑定的pnum是一个数字类型/布尔类型，不加的是字符串类型

可以，但是不推荐，props传递数据原则：单向数据流

自定义事件$emit("事件名",$event),$event代表传递的值 
template: `
        

          扩大父组件中字体大小
        
 `
父组件定义方法
methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }

借助事件中心 来实现

1. 创建事件中心对象

   var hub = new Vue();
   

2. 在组件中定义监听函数

   Vue.component('test-tom', {
         template: `
           
   
               点击
           
   `,
         methods: {
           handle: function(){//触发jerry-event事件
             hub.$emit('jerry-event', 2);
           }
         },
         mounted: function() {
           // 监听兄弟节点的tom-event事件
           hub.$on('tom-event', (val) => {
             this.num += val;
           });
         }
       });
   

Vue.component('alert-box', {
      template: `
        

          ERROR:
          默认内容  
        
      `
    });

这里面写的东西都会填充到插槽里面，如果不写则用默认的插槽内容

12

方法一：在模板中给slot添加一个name属性，在使用slot方法的时候加上slot="name名"

      
标题信息
      
主要内容1
      
主要内容2
      
底部信息信息

Vue.component('base-layout', {
      template: `
        

          

            
          
          

            
          
          
        
      `
    });

方法二：或者使用template标签，使用该标签，template并不会被渲染到页面

      
      
主要内容1
      
主要内容2
      

13.详细的解释卡这个博客吧https://www.jianshu.com/p/e10baeff888d

      

Vue.component('fruit-list', {
      props: ['list'],
      template: `
        

          

            {{item.name}}
          
        
      `
    });