vue组件

组件

　　组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法

组件扩展

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data必须是一个函数，不再是一个对象。

组件的使用

组件的使用分成三个步骤：

创建组件构造器
注册组件
使用组件

组件分类：

全局组件，全局组件—在所有的 vue 实例中都可以使用
局部组件，局部组件—只能在指定的 vue 实例中使用

定义全局组件：

到目前为止，我们只用过 Vue.component来创建组件，全局组件注册方式：Vue.component(组件名,{方法})

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="./vue.js"></script>
<script type="text/javascript">
    // 注册组件，定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了{{ count }} 次.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>

定义局部组件：

局部组件注册方式，直接在Vue实例里面注册

<body>
<div id="app">
  <child-component></child-component>
</div>
<script>
  new Vue({
    el: "#app",
    components:{
      "child-component":{
        template:"<h1>我是局部组件</h1>"
      }
    }
  });

定义组件的方式

1.使用extend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--3.使用组件-->
    <my-tem></my-tem>
    <my-tem></my-tem>
    <div>
        <div id="tem">
            <my-tem></my-tem>
        </div>
    </div>
</div>

<my-tem></my-tem>

<script src="../js/vue.js"></script>
<script>
    // 1.创建组件构造器对象
    const temC = Vue.extend({
        template: `
      <div>
        <h2>组件</h2>
        <p>组件内容</p>

      </div>`
    })

    // 2.注册组件
    Vue.component('my-tem', temC)

    const app = new Vue({
        el: '#app',
        data: {
            message: '组件内容'
        }
    })
</script>

</body>
</html>

2.使用字符串形式

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了{{ count }} 次.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>

3.模版字面量

Vue.component("my-content", {
 data: function () {
 return {
  label: "组件",
  content: "组件内容"
 }
 },
 template: `
 <div>
  <button>{{ label }}</button>
  <span>{{ content }}</span>
 </div>
 `
});

4.内联模版(inline-template)

<my-label inline-template>
 <span>{{label}}</span>
</my-label>
Vue.component('my-label', {
 data: function () {
 return {
  label: "hello"
 }
 }
})

5.X-template

定义一个 <script> 标签，标记 text/x-template类型，通过 id 链接。

<script type="text/x-template" id="label-template">
 <span>{{label}}</span>
</script>
Vue.component('my-label', {
 template: "#label-template",
 data: function () {
 return {
  label: "test"
 }
 }
})

6.template

//tem.vue
<template>
  <div>
    <h1>我是标题一</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

7.渲染函数创建节点方式（实现效果和方法6一模一样）

//ren.vue
<script>
  export default {
    render: function(createElement) {
      return createElement('h1', '我是标题一')
    }
  }
</script>

render总共接收三个参数，第一个参数为标签名('ul')，第二个参数为数据对象，第三个参数为子节点(我是标题一)，要么文本要么是存储着一个或一个以上的子节点数组.

render 函数创建多个子节点

实现下面的效果：

li-1
li-2
li-3

代码如下：

<script>
  export default {
    render: function(createElement) {
      return createElement('ul', [
        createElement('li', 'li-1'),
        createElement('li', 'li-2'),
        createElement('li', 'li-3')
      ])
    }
  }
</script>

简化后:

<script>
  export default {
    data() {
      return {
        list: ['li-1', 'li-2', 'li-3']
      }
    },
    render: function(createElement) {
      return createElement(
        'ul',
        this.list.map(_ => {
          return createElement('li', _)
        })
      )
    }
  }
</script>

8.函数渲染返回xml结构方式

Vue.component('my-label', {
 data: function () {
 return {
  label: ["活动结束"]
 }
 },
 render(){
 return <div>{this.label}</div>
 }
})