❤️vue组件

小明的学习圈子2023-11-28前端vue组件

一、组件

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

二、组件扩展

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

三、组件的使用

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

  1. 创建组件构造器
  2. 注册组件
  3. 使用组件

四、组件分类

  1. 全局组件,全局组件—在所有的 vue 实例中都可以使用
  2. 局部组件,局部组件—只能在指定的 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>
 }
})
Last Updated 2024/4/6 10:47:15