• Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第5章 Vue.js组件 5.3 动画组件 && 5.4 组件传值

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

    文章目录

    第5章 Vue.js组件

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

    5.3 动画组件

    给多选项切换的栗子添加动画

    在这里插入图片描述

    运行效果

    在这里插入图片描述

    5.4 组件传值

    组件传值一般分为父组件向子组件传值，父组件向子组件传递方法以及子组件向父组件传值。

    5.4.1 父组件向子组件传值

    举个栗子

    在这里插入图片描述

    需求是将vm实例中的data值msg属性传给子组件com1

    两步：

    1. 把数据通过v-bind自定义属性传递给子组件
    2. 子组件中通过props接收自定义属性

    在这里插入图片描述

    使用v-bind绑定自定义属性，属性值就是传递的数据。

    使用props接收组件自定义属性中的属性

    子组件接收数据的方法有两种，一种就是上面这种用的数组，一种是对象形式。

    举个栗子：

    在这里插入图片描述

    一样的效果。(需要注意数据类型)

    5.4.2 父组件向子组件传递方法

    举个栗子：在父组件中定义show方法，在子组件中定义按钮，单击子组件的按钮，调用父组件中定义的方法。

    在这里插入图片描述

    在这里插入图片描述

    要实现父组件向子组件中传递方法，同样两步：

    1. 把父组件中的show方法，通过v-on自定义事件传递给子组件
    2. 在子组件中通过this.$emit()触发父组件中的方法。

    在这里插入图片描述

    运行效果

    在这里插入图片描述

    5.4.3 子组件向父组件传值

    把子组件的数据传递给父组件，两步：

    1. 在子组件中，this.$emit()从第二个参数开始就是要传递的参数
    2. 在父组件的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>
    
    <com1 @sendfn="show">com1>
    <li v-for="(item,i) in list" :key="item.id">
        {{item.id}}---{{item.name}}
    li>


div>

<template id="temp">
    <div>
        <h1 @click="c_show">子组件h1>
    div>
template>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    var com1 = {
        template: '#temp',
        data() {
            return {
                c_msg : '我是子组件里面的内容',
                c_list : [
                    {
                        id : 1,
                        name : 'Vue'
                    },{
                        id : 2,
                        name : 'Java'
                    },{
                        id : 3,
                        name : 'Python'
                    }
                ]
            }
        },
        methods: {
            //这里是子组件com1的方法
            c_show(){
                this.$emit('sendfn',this.c_list)
            }
        }
    }

    var vm = new Vue({
        el: '#main',
        data: {
            msg: "Hello world",
            list : []
        },
        methods: {
            show(data){
                console.log("我是父组件中的方法" + data)
                //把数据挂载到父组件的data中
                this.list = data
                console.log(this.list)
            }
        },
        //私有组件
        components: {
            com1
        }
    })
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
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    1. 在子组件中创建列表
    2. 把this.c_list传递给父组件
    3. 在父组件中接收子组件传递的数据
    4. 把数据挂载到父组件中的data
    5. 使用v-for渲染父组件中的数据

    运行效果

    在这里插入图片描述

  • 相关阅读:
    【面试普通人VS高手系列】Spring Boot中自动装配机制的原理
    微信小程序通过 movable-area 做一个与vuedraggable相似的上下拖动排序控件
    TCP 和UDP 的详细介绍
    基于JavaSwing开发登录计算器 课程设计 大作业
    Vue组件详解
    Netty对JDK做了哪些定制和优化
    Mac文件搜索工具HoudahSpot 6.4.1中文版
    【PostgreSQL高可用之Repmgr和Patroni部分场景对比】
    如何对 TiDB 进行 TPC-C 测试
    投资组合优化的人工蜂群算法（Matlab代码实现）
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126566374