三、组件与数据交互

一、组件基础

1、单文件组件

第一步：引入组件 import ComponentTest from './components/ComponentTest.vue'
第二步：挂载组件 components: {ComponentTest }
第三步：显示组件 <ComponentTest></ComponentTest>

<!-- 父组件 -->
<template><ComponentTest></ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest}
}
</script><style></style>

<!-- 子组件 -->
<template><h3>单文件组件</h3>
</template><script>
export default {name: "ComponentTest"
}
</script><!-- stye添加scoped修饰，表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>

在这里插入图片描述

二、Props组件交互(向下传递)

1、Props组件交互

<!-- 父组件 -->
<template><h3>prop组件交互</h3><ComponentTest :message="msg" :values="values"></ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest},data() {return {msg: "数据信息",values: [1, 2, 3]}}
}
</script><style></style>

<!-- 子组件 -->
<template><h3>单文件组件数据：{{ message }}</h3><ul><li v-for="(item, index) in values" :key="index">{{ item }}</li></ul>
</template><script>
export default {name: "ComponentTest",props: {message: {type: String,default: ""},values: {type: Array,// 数组和对象的默认值必须使用函数返回default: function () {return [];}}}
}
</script><!-- stye添加scoped修饰，表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>

在这里插入图片描述

三、自定义事件组件交互(向上传递)

1、自定义事件组件交互

<!-- 父组件 -->
<template><h3>自定义事件组件交互</h3><ComponentTest @onMsg="GetMsg"> </ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest},methods: {GetMsg(data) {console.log(data);}}
}
</script><style></style>

<!-- 子组件 -->
<template><button @click="sendClickHandle">发送数据给父组件</button>
</template><script>
export default {name: "ComponentTest",data() {return {msg: "子组件数据"}},methods: {sendClickHandle() {// 父组件监听的事件名称，字符串 // 向父组件传递的参数this.$emit("onMsg", this.msg);}}
}
</script><!-- stye添加scoped修饰，表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>

在这里插入图片描述

四、组件生命周期

1、组件生命周期

在这里插入图片描述
创建：brforeCreate、created
渲染：brforeMount、mounted
更新：brforeUpdate、updated
卸载：brforeUnmount、unmounted

<!-- 父组件 -->
<template><h3>组件生命周期</h3><ComponentTest></ComponentTest>
</template><script>
import ComponentTest from './components/ComponentTest.vue'export default {name: 'App',components: {ComponentTest}
}
</script><style></style>

<!-- 子组件 -->
<template><p>{{ msg }}</p><button @click="msg = '更新后'">更新数据</button>
</template><script>
export default {name: "ComponentTest",data() {return {msg: "子组件数据"}},beforeCreate() {console.log("组件创建之前");},created() {console.log("组件创建之后");},beforeMount() {console.log("组件渲染之前");},mounted() {console.log("组件渲染之后");},beforeUpdate() {console.log("组件更新之前");},updated() {console.log("组件更新之后");},beforeUnmount() {console.log("组件卸载之前");},unmounted() {console.log("组件卸载之后");}
}
</script><!-- stye添加scoped修饰，表示属性尽在当前组件中生效 -->
<style scoped>
h3 {color: red;
}
</style>

在这里插入图片描述

五、vuex（全局数据管理）

1、创建vuex项目

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to 
proceed)(*) Babel( ) TypeScript(*) Progressive Web App (PWA) Support( ) Router
>(*) Vuex	//vuex选项( ) CSS Pre-processors( ) Linter / Formatter( ) Unit Testing( ) E2E Testing

2、使用方法

（1）State（存储数据）

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'export default createStore({// 所有数据都存放在这里state: {counter: 100}
})

方式一：

<template><p>{{ $store.state.counter }}</p><HelloWorld></HelloWorld>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script>

方式二

<template><div class="hello"><p>{{ counter }}</p></div>
</template><script>
import { mapState } from 'vuex';export default {name: 'HelloWorld',computed: {...mapState(["counter"])}
}
</script><style scoped></style>

（2）Getter（获取数据）

对vuex中的数据进行过滤

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'export default createStore({// 所有数据都存放在这里state: {counter: 100},getters: {getCounter(state) {return state.counter > 0 ? state.counter : "counter的值小于0"}},mutations: {},actions: {}
})

方式一

<template><p>{{ $store.getters.getCounter }}</p><HelloWorld></HelloWorld>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

方式二

<template><div class="hello"><p>{{ getCounter }}</p></div>
</template><script>
import { mapGetters } from 'vuex';export default {name: 'HelloWorld',computed: {...mapGetters(["getCounter"])}
}
</script><style scoped></style>

（3）Mutation（提交修改数据）

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'export default createStore({// 所有数据都存放在这里state: {counter: 100},getters: {getCounter(state) {return state.counter > 0 ? state.counter : "counter数据异常"}},mutations: {addCounter(state, num) {state.counter += num;}},actions: {}
})

方法一

<template><p>{{ $store.getters.getCounter }}</p><HelloWorld></HelloWorld><button @click="addCounterHandle">增加数据</button>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},methods: {addCounterHandle() {// 固定调用方式this.$store.commit("addCounter", 10);}}
}
</script>
<style></style>

方法二

<template><div class="hello"><p>{{ getCounter }}</p><button @click="addCounterHandle">增加20</button></div>
</template><script>
import { mapGetters, mapMutations } from 'vuex';export default {name: 'HelloWorld',computed: {...mapGetters(["getCounter"])},methods: {...mapMutations(["addCounter"]),addCounterHandle() {// 固定调用方式this.addCounter(20);}}
}
</script><style scoped></style>

（4）Action

action提交给mutation，包含异步操作

// vue-vuex\src\store\index.js
import { createStore } from 'vuex'export default createStore({// 所有数据都存放在这里state: {counter: 100},getters: {getCounter(state) {return state.counter > 0 ? state.counter : "counter数据异常"}},mutations: {addCounter(state, num) {state.counter += num;}},actions: { //为异步操作准备asyncAddCounter({ commit }) {commit("addCounter", 30);}}
})

方法一

<template><div class="hello"><p>{{ getCounter }}</p><button @click="asyncAddCounterHandle">增加20</button></div>
</template><script>
import { mapGetters, mapMutations } from 'vuex';export default {name: 'HelloWorld',computed: {...mapGetters(["getCounter"])},methods: {...mapMutations(["addCounter"]),asyncAddCounterHandle() {this.$store.dispatch("asyncAddCounter");}}
}
</script><style scoped></style>

方式二

<template><div class="hello"><p>{{ getCounter }}</p><button @click="asyncAddCounterHandle">增加20</button></div>
</template><script>
import { mapGetters, mapMutations, mapActions } from 'vuex';export default {name: 'HelloWorld',computed: {...mapGetters(["getCounter"])},methods: {...mapMutations(["addCounter"]),...mapActions(["asyncAddCounter"]),asyncAddCounterHandle() {this.asyncAddCounter();}}
}
</script><style scoped></style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/145529.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

系统性认知网络安全

系统性认知网络安全

前言&#xff1a;本文旨在介绍网络安全相关基础知识体系和框架 目录 一.信息安全概述 信息安全研究内容及关系 信息安全的基本要求 保密性Confidentiality&#xff1a; 完整性Integrity&#xff1a; 可用性Availability&#xff1a; 二.信息安全的发展 20世纪60年代&…
阅读更多...
4.9 多协议标记交换MPLS

4.9 多协议标记交换MPLS

思维导图&#xff1a; 前言&#xff1a; **4.9 多协议标记交换MPLS笔记** 1. **定义与背景**&#xff1a; - MPLS (多协议标记交换) 是一种由 IETF 开发的新协议。 - “多协议”意味着 MPLS 的上层可以使用多种协议。 - 该协议综合了多家公司的技术&#xff0c;如 C…
阅读更多...
【Docker从入门到入土 2】Docker数据管理、网络通信和网络模式 1.0

【Docker从入门到入土 2】Docker数据管理、网络通信和网络模式 1.0

Part2 一、Docker网络模式&#xff08;面试高频&#xff09;1.1 Docker 网络实现原理1.2 host模式1.3 container模式1.4 none模式1.5 bridge模式1.6 自定义网络 二、Docker网络通信2.1 端口映射2.2 容器互联 三、Docker资源控制3.1 Cgroup简介3.2 CPU资源控制3.2.1 设置CPU使用…
阅读更多...
java--自增自减运算符

java--自增自减运算符

1.自增自减运算符 注意&#xff1a;、--只能操作变量&#xff0c;不能操作字面量的。 2.自增自减的使用注意事项 1.、--如果不是单独使用(如果在表达式中、或者同时有其它操作)&#xff0c;放在变量前后会存在明显区别 1.1放在变量前面&#xff0c;先对变量进行1、-1&#xff…
阅读更多...
6、centos7安装DNS服务器结合Nginx Proxy Manager实现局域网自定义域名解析

6、centos7安装DNS服务器结合Nginx Proxy Manager实现局域网自定义域名解析

前言 我想在物理主机&#xff08;windows11)、虚拟机&#xff08;CentOS7)、虚拟机上部署的k8s集群所在的局域网内实现自定义域名的访问&#xff0c;通过Nginx Proxy Manager反向代理。 最终效果&#xff1a;在Nginx Proxy Manager的页面配置的域名能准确解析到代理的目标主机…
阅读更多...
低代码助力软件开发

低代码助力软件开发

低代码开发工具正在日益变得强大&#xff0c;它正不断弥合着前后端开发之间的差距。对于后端来说&#xff0c;基于低代码平台开发应用时&#xff0c;完全不用担心前端的打包、部署等问题&#xff0c;也不用学习各种框架&#xff08;Vue、React、Angular等等&#xff09;&#x…
阅读更多...
数据结构: map与set的简单实现

数据结构: map与set的简单实现

目录 map与set的模拟实现 1.基本框架 2.模拟实现map与set所需要做的事 1.使用模板 , 达到泛性编程 2.比较问题 3.迭代器 RBTree中: operator operator-- 4.map [ ] 的实现 5.使用普通迭代器构造const迭代器 效果 map与set的模拟实现 1.基本框架 map set 2.模拟实…
阅读更多...
如何在Potplayer中使用公网访问群晖WebDav？

如何在Potplayer中使用公网访问群晖WebDav？

文章目录 1 使用环境要求&#xff1a;2 配置webdav3 测试局域网使用potplayer访问webdav4 内网穿透&#xff0c;映射至公网5 使用固定地址在potplayer访问webdav ​ 国内流媒体平台的内容让人一言难尽&#xff0c;就算是购买了国外的优秀作品&#xff0c;也总是在关键剧情上删删…
阅读更多...
【必看技巧】Access开发者必备：如何用代码隐藏功能区、导航区、状态栏？

【必看技巧】Access开发者必备：如何用代码隐藏功能区、导航区、状态栏？

hi&#xff0c;大家好呀&#xff01; 今天想着给大家分享点啥呢&#xff1f;最近几个月断更的有些“勤快”了&#xff0c;那就给大家分享个几行代码。 当我们在access中开发完成后&#xff0c;为了让我们的系统更加的像一个系统&#xff0c;我们会把access的功能区&#xff0…
阅读更多...
ubuntu系统由于英伟达显卡驱动问题黑屏或者其他报错开机无法进入系统解决办法！

ubuntu系统由于英伟达显卡驱动问题黑屏或者其他报错开机无法进入系统解决办法！

背景&#xff1a; 硬件&#xff1a;CPU&#xff1a;AMD PRO 3955WX、硬盘&#xff1a;一块固态&#xff08;ubuntu&#xff09;一块固态&#xff08;windows&#xff09;双系统、英伟达丽台RTX4000显卡&#xff1b; 故障&#xff1a; 把显卡拆出来&#xff0c;拿到别的地方测…
阅读更多...
GoLong的学习之路（五）语法之数组

GoLong的学习之路（五）语法之数组

书接上回&#xff0c;上回书说到&#xff0c;循环语句&#xff0c;在go中循环语句的少了whlie这个关键词&#xff0c;但是与之for可以改这个改这个特点。并且在终止关键词中&#xff0c;又有标签可以方便&#xff0c;停止。这次说数组 文章目录 Array(数组)数组的初始化方法一方…
阅读更多...
iOS原生、Android 原生， flutter 三种方式给照片流添加文字（水印）

iOS原生、Android 原生， flutter 三种方式给照片流添加文字（水印）

效果图：三中代码实现的效果差不多 Swift：代码 import UIKitclass ImageWatermarking: NSObject {static func textToImage(drawText text: String, inImage initImage: UIImage, atPoint point: CGPoint) -> UIImage {let textColor = UIColor.whitelet textFont = UIFon…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023