Vue提问二：（组件）

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

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

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

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

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

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

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

<menu-item :pnum='12' pnum1 = "12"></menu-item>

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

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

10.非父子组件间的传值

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

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

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

答案

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

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

 <div id="app">
    <button-counter></button-counter>
  </div>

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

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

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

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

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

<menu-item :menu-title='ptitle'></menu-item>
Vue.component('menu-item', {
      props: ['menuTitle'],
      template: '<div>{{menuTitle}}</div>'
    });

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

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

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

<menu-item  @enlarge-text='handle'></menu-item>
自定义事件$emit("事件名",$event),$event代表传递的值 
template: `
        <div>
          <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
        </div> `
父组件定义方法
methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }

借助事件中心 来实现

1. 创建事件中心对象

   var hub = new Vue();
   

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

   Vue.component('test-tom', {
         template: `
           <div>
               <button @click='handle'>点击</button>
           </div>`,
         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: `
        <div>
          <strong>ERROR:</strong>
          <slot>默认内容</slot>  
        </div>
      `
    });

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

12

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

<base-layout>
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
</base-layout>
Vue.component('base-layout', {
      template: `
        <div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });

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

<base-layout>
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
</base-layout>

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

<fruit-list :list='list'>
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}		         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
</fruit-list>
Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });