上回说到Vue组件间通讯，最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法，这节来说说Vuex(store仓库)。 首先Vuex需要安装，安装的方式有很多，在这里就不一一细说了。我是通过npm方式安装的： npm install vuex --save安装好之后需要再main.js里全局引入： import Vue from vue import Vuex from vuex Vue.use(Vuex)new Vue({el:#app,store,components: { App },template: <App/>})这样就完成了Vuex的安装。接下来就是Vuex的...
因为项目中用的是 element-ui 框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下： drawer.vue<template><div class="drawer"><div :class="maskClass" @click="closeByMask"></div><div :class="mainClass" :style="mainStyle" class="main"><div class="drawer-head"><span>{{ title }}</span><span class="close-btn" v-show="closable" @click="closeByButton">X</span></div><div class="drawer-body"><slot/>...
按需加载的原理 按需加载，本质上是把一个组件库的不同组件 拆分成不同文件 ，按照需要引用对应的文件，而该文件暴露一个 install方法 ，供Vue.use使用。 比如：我只想引用element库里的一个Button组件 import Button from element-ui/lib/Button.js import Button from element-ui/lib/theme-chalk/Button.cssVue.use(Button);上面的写法比较繁琐，而且需要知道每个组件的实际路径，使用起来并不方便，所以我们还需要借助一个转换...
组件在 vue开发中是必不可少的一环，用好组件这把屠龙刀，就能解决不少问题。 组件是什么官方的定义： 组件是可复用的 Vue 实例，并且可带有一个名字。官方的定义已经非常简明了，组件就是一个实例。 如何使用组件在具体编写组件实例代码前，我们先来如下几个约定： 所有组件基于单文件组件，即一个 .vue文件就是一个组件data 必须为一个函数template 节点下只能有一个子节点约束不多，但最后两个需要牢记在心。 基于单文件组件的前...
本文实例为大家分享了Vue组件实现触底判断的具体代码，供大家参考，具体内容如下 非常简陋的代码，以后有空回来完善 子组件代码： <template><div class="scroll"></div> </template><script>export default {name:Scroll,methods:{scrollEvent(){if (document.documentElement.scrollTop+ document.documentElement.clientHeight >= document.body.scrollHeight) {this.onBottom();}}},props:{onBottom:Function},mounted(){windo...
注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api 一、效果图二、组件要实现的功能 1. 如果有传入坐标点，则定位到坐标点 2. 如果没有传入坐标点，则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后，右侧要显示拖动后的经纬度和地址 6. 点击确定按钮，返回最后的坐标点和地名给父组件 三、 组件实现具体代码<t...
先说问题，父组件利用props向子组件传值，浏览器 console 有这个值，但是获取不到内部的属性，困了我3个小时，真的**personal console以下为原代码 1、home.vue（父组件）--personal是被传的参数 <!--子组件--> <form-picker class="form-picker":personal="personal" > </form-picker> export default {data(){return{personal:{state:,////判断是修改状态，还是新增状态 add/editdata:[]}}},mounted(){this.$api.personal.search...
声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解 现在，前后端分离与客户端渲染已经成为前端开发的主流模式，绝大部分的前端应用都适合用这种方式来开发，又特别是 React、Vue 等组件技术的发展，更是使这种方式深入人心。 但有一些应用，客户端渲染就会遇到一些问题了： 需要做 SEO（搜索引擎优化），但客户端渲染的 html 中几乎没有可用的信息需要首屏快速加载，但客户端渲染一般是长时间的加载动画或者白屏如果能把客户...
前言 本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。本文的代码请猛戳 github博客 ，纸上得来终觉浅，大家动手多敲敲代码！ 一、属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最好用对象的写法，这样可以针对每个...
本文将帮助：将自己写的Vue组件打包到npm进行代码托管，以及正常发布之后如何使用自己的组件。本文讲述的仅仅是最基础的实现，其他复杂的操作需要非常熟悉webpack的相关知识，作者将继续学习。按照大佬文中写的一步步操作，够细心的话基本可以一步到位。下面总结一下发布步骤：1. 利用Vue的脚手架新建一个简易版的Vue项目my-project：vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev2. 编写组件：sr...
需求 在业务中，会碰到许多点击请求的情况，在请求前改变一个lock变量（在lock变回来之前，点击无效），在请求回调中再改变lock.以确保在，请求回来之前，不会重复请求。或者类似的点击节流业务 实现方式指令 <div v-for="a in 3" :key="a" v-demo:getData="a">指令</div>//getData是函数名，a是传入的参数directives: {demo: {bind(el: Element, binding: any, vnode: VNode) {const that: any = vnode.context// console.log(bin...
一个适用性良好的组件，一种是可配置项很多，另一种就是容易覆写，从而扩展功能 Vue 组件的 API 来自三部分——prop、事件和插槽： prop 允许外部环境传递数据给组件event 允许从组件内触发外部环境的副作用slot 允许外部环境将额外的内容组合在组件中prop 组件具有自身状态，当没有相关 porps 传入时，使用自身状态完成渲染和交互逻辑；当该组件被调用时，如果有相关 props 传入，那么将会交出控制权，由父组件控制其行为 仅一个值...
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、 $emit / $on 、vuex、 $parent / $child...
预览组件库官网 github地址 如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈， 请勿在生产环境中使用，供学习&交流~~完整项目目录结构git clone到本地安装依赖后，执行npm run serve进行本地组件库开发，npm run docs:dev进行组件库官网开发。一般在src/demo.vue进行单个组件测试通过后，再引入到.vuepress/components中放入组件库官网。├─docs // vuepress开发目录 │ ├─.vuepress │ │ ├─components //...
问题复现：父组件中通过名为 source 的 prop 向子组件 Chart 传入数据 <Chart :source="chartData"></Chart>import Chart from ../components/Chartexport default {name: Home,components: { Chart },data () {return {chartData: []}},mounted () {setTimeout(() => {this.chartData = [[89.3, 58212, Matcha Latte],[57.1, 78254, Milk Tea],[74.4, 41032, Cheese Cocoa],[50.1, 12755, Cheese Brownie],[89.7, 20145, Matcha C...