vue的组件和插槽

前言

大概记录学习vue的组件和插槽

一、vue组件

1.什么是组件

 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

• 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

• 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

 2.组建的四种创建方式

1.使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
    template: '<h1>登录</h1>'  });  Vue.component('login', login); 

 2.直接使用 Vue.component 方法：

Vue.component('register', {
    template: '<h1>注册</h1>'  });

3.将模板字符串，定义到script标签中：

<script id="tmpl" type="x-template">
    <div><a href="#">登录</a> | <a href="#">注册</a></div> 
 </script>

 同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
    template: '#tmpl'  });

 4.将模板字符串，定义到template标签中：

< template id="tmpl">
    <div><a href="#">登录</a> | <a href="#">注册</a></div> 
 </ template >

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
    template: '#tmpl'  });

注意：现在几乎都是使用第四种方法创建，前三种了解即可 

5. 组件中展示数据和响应事件

组件中 展示数据和在vue视图层中一样，数据用{ {}}包裹，通过@绑定事件，：绑定属性

 <template id="login">
    <div>
    {
   
   {msg}}
    <button @click="add">加加</button>
    </div>
  </template>

在组件实例中需要同样定义data和methods对象，但是 在组件中，data需要被定义为一个方法：

Vue.component('login',{
      template:'#login',
      data(){
        return {
          msg:0
        }
      },
      methods:{ 
        add(){
          this.msg++
        }
      }
    })

二、vue 插槽

1.什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

1.插槽的使用：在子组件中放一个占位符

<template id="course">
        <h2><slot></slot>课程</h2>
</template>

2.在父组件中给这个占位符填充内容：

<div id="app">
			<course>免费</course>
			<course>精品</course>
			<course>限时折扣</course>
		</div>

但是此时有个问题，如果组件内有多个插槽，则只能填充第一个插槽，无法给具体的插槽填充不同的值，此时就需要具名插槽

3.具名插槽

具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

1. 子组件的代码，设置了两个插槽(header和footer)：

<template id="course">
        <h2><slot name="header"></slot>课程</h2>
        <h2><slot name="footer"></slot>课程</h2>
</template>

2.父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中 

    <div id="app">
		<course>
            <template v-slot:header>
                顶部
            </template>
            <template v-slot:footer>
                底部
            </template>
        </course>
	</div>

---