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

两步：

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

在这里插入图片描述

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

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

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

举个栗子：

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

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

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

在这里插入图片描述

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

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

在这里插入图片描述

运行效果

在这里插入图片描述

5.4.3 子组件向父组件传值

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

在子组件中，this.$emit()从第二个参数开始就是要传递的参数
在父组件的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

在子组件中创建列表
把this.c_list传递给父组件
在父组件中接收子组件传递的数据
把数据挂载到父组件中的data
使用v-for渲染父组件中的数据

运行效果

在这里插入图片描述

相关阅读:
【机器学习网络】BP神经网络与深度学习-6 深度神经网络（deep neural Networks DNN）
基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(五)
【FPGA教程案例56】深度学习案例3——基于FPGA的CNN卷积神经网络之池化层verilog实现
Java.lang.Class类 getEnumConstants()方法有什么功能呢？
选择排序(简单选择排序和堆排序)
Flink 的集群资源管理
解决sentinel结合nacos实现集群限流（嵌入式）
Unity编辑器扩展之CustomPropertyDrawer理解
【STL】set集合
佐助题库1228答案

原文地址：https://blog.csdn.net/weixin_44226181/article/details/126566374

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

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

文章目录

第5章 Vue.js组件

5.3 动画组件

5.4 组件传值

5.4.1 父组件向子组件传值

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

5.4.3 子组件向父组件传值

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