• Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第5章 Vue.js组件 5.2 创建私有组件

    Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

    文章目录

    第5章 Vue.js组件

    Vue的核心思想是数据驱动视图和组件化，组件是Vue很重要的功能模块，作用是拆分代码，代码复用等。

    5.2 创建私有组件

    全局组件可以在任意的Vue实例中使用，而私有组件只能在一个Vue实例中使用。

    举个栗子

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Documenttitle>

head>
<body>

<div id="main" v-cloak>
    <mycom4>mycom4>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>

    var vm = new Vue({
        el: '#main',
        data: {
            msg: "Hello world",
        },
        methods: {},
        //私有组件
        components : {
            mycom4 : {
                //同样可以拆分
                template : '
    私有组件
    '    
            }
        }
    })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    运行效果

    在这里插入图片描述

    在Vue实例对象中，私有组件是components属性，它和data属性、methods属性平级。

    components属性值是对象，可以任意创建组件。 mycom4 → 组件名称。

    上面栗子中将代码都写在了vm实例对象中，降低了代码阅读性，↓使用私有组件拆分代码。

    在这里插入图片描述

    在components属性中新建了mycom5组件，其值是mycom5变量，mycom5变量存储的就是要渲染的HTML代码。

    小tips：

    在对象中，当属性名和属性值相同时，可以简写

    在这里插入图片描述

    效果不变。

    5.2.1 组件中的data和methods

    组件也可以当成一个Vue实例对象，在组件中也可以使用data属性、methods属性以及生命周期函数等，但使用方法不完全一样。

    举个栗子

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Documenttitle>

head>
<body>

<div id="main" v-cloak>
    <mycom5>mycom5>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>

    var mycom5 = {
        template: '
    组件---{{msg}}
    '    ,
        data() {
            return {
                msg : 'Hello'
            }
        },
        methods: {}
    }

    var vm = new Vue({
        el: '#main',
        data: {
            msg: "Hello world",
        },
        methods: {},
        //私有组件
        components: {
            //es6语法简写
            mycom5,
        }
    })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    运行效果

    在这里插入图片描述

    可以看到，和template属性平级，可以书写data属性和methods属性，组件中的data与Vue实例中的data用法不同。

    Vue实例中的data是一个对象，可以直接写数据，组件中的data是一个方法，并且必须返回一个对象。在return的对象中存储数据，组件中methods属性的使用方法和Vue实例中methods属性的使用方法一样，都是存储的方法。

    5.2.2 组件选项卡切换案例

    1. 双组件切换

      举个栗子

      DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Documenttitle>

head>
<body>

<div id="main" v-cloak>
    <a @click="tab(1)">登录a>
    <a @click="tab(0)">注册a>
    <com1 v-if="flag">com1>
    <com2 v-else>com2>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>

    var com1 = {
        template : '
      login组件
      '      
    }
    var com2 = {
        template: '
      register组件
      '      
    }

    var vm = new Vue({
        el: '#main',
        data: {
            msg: "Hello world",
            flag : true
        },
        methods: {
            tab(i){
                if (i == 1){
                    this.flag = true
                }
                else{
                    this.flag = false
                }
            }
        },
        //私有组件
        components: {
            com1,
            com2
        }
    })
      script>
body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53

      运行效果

      在这里插入图片描述

    2. 多组件切换

      使用v-if和v-else只能两个组件之间的切换，使用标签可以实现多组件切换。

      DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Documenttitle>

head>
<body>

<div id="main" v-cloak>
    <a @click="tab('com1')">登录a>
    <a @click="tab('com2')">注册a>
    <a @click="tab('com3')">首页a>
    
    <component :is="comName">component>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>

    var com1 = {
        template: '
      login组件
      '      
    }
    var com2 = {
        template: '
      register组件
      '      
    }

    var com3 = {
        template: '
      首页
      '      
    }

    var vm = new Vue({
        el: '#main',
        data: {
            comName : 'com1',
            msg: "Hello world"
        },
        methods: {
            tab(i) {
                this.comName = i
            }
        },
        //私有组件
        components: {
            com1,
            com2,
            com3
        }
    })
      script>
body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54

      运行效果

      在这里插入图片描述

  • 相关阅读:
    Hadoop Spark太重，esProc SPL很轻
    CSS读书笔记
    java基础之面向对象多态性[24]
    TinyShell（CSAPP实验）
    如何恢复删除的照片和视频?可以试试看
    83、SpringBoot --- 下载和安装 MSYS2、 Redis
    软件架构风格
    Kafka系列之：实现Kafka Connect集群访问认证
    Java面试题全集（上）
    Java 基本类型和包装类
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126566332