Vue组件的基本使用

1、组件的使用

1. 注册一个组件

   Vue.component('my-component-name', { /* ... */ })
   

2. 调用

   <div id="app">
       <my-component-name></my-component-name>    
       <my-component-name></my-component-name>
       <my-component-name></my-component-name>
   </div>
   

2、局部注册组件

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

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

3、组件的注意事项

1. data必须是一个函数

2. 组件模板内容必须是单个根元素

   可以使用div最外层，里面可以放多个标签

3. 组件模板内容可以是模板字符串

4. 组件命名方式

   1. 驼峰式

   驼峰式可以用在字符串模板中，但是如果作为普通的标签模板会出错

   HelloWord

   可以将其转化为短横线式->hello-world即可使用

   2. 短横线式

   hello-world

4、组件间数据交互

1. 父组件向子组件传值

   组件内部通过props接收传递过来的值

   Vue.component('menu-item', {
     props: ['title'],
     template: '<h3>{{ postTitle }}</h3>'
   })
   

   父组件通过属性将值传递给子组件

   <menu-item title="来自父组件的值"></menu-item>	//静态
   <menu-item :title="title"></menu-item>	//动态
   

   props属性名规则

   1. 在 propse 中使用驼峰式，模板中需要使用短的形式
   2. 字符串形式的模板中没有这个眼制

   props支持的数据类型

   1. 字符串string
   2. 数值number
   3. 布尔值boolean
   4. 数组Array
   5. 对象Object

   小tips：

   ​ 如果父组件向子组件传数值的时候使用pnum=12则传递的是string类型

   ​ 如果使用的是:pnum='12'则是number类型的值，可以进行计算

   ​ boolean也类似

2. 子组件向父组件传值

   props传递数据原则

   单向数据流、父可以传递给子数据，不允许子组件直接操作props内容

   传递方式

   1. 子组件通过自定义事件向父组件传递信息

      <button v-on:click='$emit("enlarge-text")', 0.1>
          扩大字体
      </button>
      
      

   2. 父组件监听子组件的事件

      <menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
      

3. 非父子组件间传值

   单独的事件中心管理组件间的通信

   var eventHub = new Vue();
   //监听事件与销毁事件
   eventHub.$on('add-todo', addTodo);
   eventHub.$off('add-todo');
   //触发事件
   eventHub.$emit('add-todo', id);
   

5、组件插槽

1. 组件插槽的作用

   父组件向子组件传递内容

2. 组件插槽基本用法

   插槽位置

   Vue.component('alert0box', {
       template:`
   	<div class="demo-alert-box">
   		<slot name="header"></slot>	//起个名，可以直接插到这里面
   		<slot></slot>	//固定组件
   		<slot name="footer"></slot>
   	</div>
   	`
   })
   

   插槽内容

   <alert-box>
       <h1 slot="header">
           标题
       </h1>
       something bad happened.	//匹配到默认插槽中
       <p slot="footer">
           底部内容
       </p>
       
       //如果需要饱含多个标签，使用template
       <template slot="header">
       	<p>
               标题1
           </p>
           <p>
               标题2
           </p>
       </template>
   </alert-box>
   

3. 作用域插槽

   父组件对子组件的内容进行加工处理