Vue
文章平均质量分 51
花生吃花生
这个作者很懒,什么都没留下…
展开
-
vue3 setup 语法糖
组件之间通信:父传子:使用defineProps 父组件: import Student from './Student.vue' import { ref,onMounted } from 'vue' const schoolName = ref('xxx') 子组件 import { ref } from 'vue' const props = defineProps({ schoolName: { type: String, default: 'error' } }原创 2022-03-23 10:12:41 · 1061 阅读 · 0 评论 -
中国疫情可视化
使用Vue和Echarts制作了关于中国疫情可视化地图。 疫情接口来自腾讯新闻:https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5 https://view.inews.qq.com/g2/getOnsInfo?name=disease_other使用腾讯提供的两个接口进行数据可视化展示。 成果: ...原创 2022-02-27 11:46:03 · 540 阅读 · 1 评论 -
Vue组件之间通信(props、自定义事件、全局事件总线、消息订阅与发布、Vuex)
Vue组件之间的通信是使用组件中常用的部分。介绍几种常用的组件之间通信方式。 一、使用props配置项 props配置项主要应用与父组件与子组件进行通信。父组件------>子组件 使用方法:在组件标签中绑定属性或者方法。在子组件中使用props配置项来接收父组件传递过来的数据。 父组件中: <template> <div id="app"> <!-- 父组件给子组件传递数据,动态绑定。 --> <!-- 子组件使用props来原创 2021-10-31 23:04:40 · 1015 阅读 · 0 评论 -
Vuex 使用方法(简单易懂)
Vuex是在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。 Vuex的使用方法: 一、安装 npm install vuex --save 使用npm进行安装 二、引入 新建文件:src/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default n..原创 2021-10-30 17:04:07 · 344 阅读 · 0 评论 -
超级详细Vue插槽slot具体使用方法
Vue的插槽有三种,下面来一一介绍 一、默认插槽 默认插槽的使用很简单。把Student组件为被使用组件,App组件为使用组件,及引入Student组件的组件。 使用方法:想要在Student组件中插入如下的h1标签内的内容。在App组件中的用法;在App组件的Student标签里写入要插入的标签。 <template> <div id="app"> <!-- 默认插槽 --> <Student> <!-- 想要原创 2021-10-28 11:18:56 · 934 阅读 · 1 评论