最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 后来在使用vuex的时候一直报“[vuex] unknown mutation type: changeCity”，才发现在store文件中将mutations写在了state里面，...
碰到的问题是: upload 组件在 on中写的监听事件不会被触发在 props 中来监听:==> 原文：https://www.cnblogs.com/mafeng/p/11027356.html
1.自定义 生成二维码组件QRCode.vue<!-- 生成二维码 组件 --> <template><canvasclass="qrcode-canvas":class="{show: show}":style="{height: size + ‘px‘, width: size + ‘px‘}":height="size":width="size"ref="qr"></canvas> </template><script>import qr from ‘qr.js‘export default {name: ‘qrcode‘,props: {val: {type: String,required: true},size: {type: Number,default: 200},// ‘L‘, ‘M‘, ‘Q‘, ‘H‘l...
vue的局部组件使用，需要先声明一个组件，然后挂载到全局组件的components,再使用。<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="node_modules/vue/dist/vue.js"></script></head><body><div id="app"><Vheader/></div><script type="text/javascript">var Vheader={template:`<div @click="handerFn">头部</div>`,data(){return{}},methods:{handerFn(){alert("123")}}}var vm=new Vue({el:"#...
1、父组件(父组件访问子组件的方法drop） <!--父组件访问子组件的方法v-ref:shopcart--> <template><div id="parent"><shopcart v-ref:shopcart></shopcart></div> </template> <script>export default {methods:{_drop(target) {// 体验优化,异步执行下落动画this.$nextTick(() => {//this.$refs.shopcart访问子组件（target是子组件中传过来的当前操作的元素对象） this.$refs.shopcart.drop(target);});},}} </script>2、子组件...
一、组件的构造组件：由 template + css + js 三部分组成(.vue文件)1）组件具有复用性2) 复用组件时，数据要隔离3) 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别组件介绍 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用2) 分组分为根组件、全局组件与局部组件根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件全局组件：不用注册，就可以...
之前写了vue的生命周期，本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程，以及各个生命周期的特点。然而今天被问到父子组件生命周期执行顺序的时候一头雾水，根本不知道怎么回事。然后写了一段demo验证一下大佬们说的顺序。<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=e...
父组件向子组件传值是通过属性(props)的形式进行传递 子组件向父组件传值是通过事件($emit)的形式进行传递.也可以理解成通过事件回调的方式(自己理解的)//父组件代码如下:<template><div><one-component :name="message" @receivedata="changesome"></one-component></div> </template><script>import OneComponent from "./OneComponent.vue"export default {name:"HelloWorld",data() {return {message:"Hellow World!!!!!!"}},c...
最近学习了一下Vue, 尝试实现一个自定义Tab组件, 效果如下:支持动态添加tab项, 内容支持放入动态组件效果图: 目录结构:1. 使用vue-cli创建脚手架项目2. 在components中创建C1,C2,C3,MyTab四个自定义组件 package.json 1{2 "name": "hello",3 "version": "0.1.0",4 "private": true,5 "scripts": {6 "serve": "vue-cli-service serve",7 "build": "vue-cli-service build",8 "lint": "vue-cli-service lint...
Tab 标签页组件基础用法默认情况下启用第一个标签，可以通过v-model绑定当前激活的标签索引<tabs v-model="active"><tab title="标签 1">内容 1</tab><tab title="标签 2">内容 2</tab><tab title="标签 3">内容 3</tab> </van-tabs> export default {data() {return {active: 2};} }点击事件可以在tabs上绑定click事件和change事件，事件传参为标签对应的索引和标题<tabs @click="handleClick"></tabs> <tabs @change="handleChan...
一、子父间通信（props/$emit）①父组件向子组件传参（props） 父组件： 子组件： 总结：父组件通过props给子组件传递数据。 ②子组件给父组件传递值（$emit）子组件： 父组件： 总结：儿子组件向父组件传递数据的方式就是通过子组件内 $emit 触发自定义事件，子组件使用时 v-on 绑定监听自定义事件。 二、任意组件之间通信（$emit 、$son）EventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项...
不多BB直接上图：如上图：为子组件绑定点击事件如上图：send方法触发父组件绑定的事件 如上图：为父组件绑定触发事件@myEvent="aa"aa方法接受子组件传过来的值原文：http://www.cnblogs.com/dujunfeng/p/7991970.html
主要代码 const SetPwdTemplate = () => ({component: import(/* webpackChunkName: "setUserPwdAsync" */ "@/components/setUser/pwd.vue"), loading: ‘加载组件‘delay: 300,timeout: 3000, });原文：https://www.cnblogs.com/whatarey/p/15160684.html
定义Vue组件什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：1.模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；2.组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的三种方式使用 Vue.extend 配合 Vue.compon...
Vuex官网地址：https://vuex.vuejs.org/zh/guide/ 步骤一：安装vuex npm install vuex --save 步骤二：简单使用构建核心仓库store.jsVuex 应用的状态 state都应当存放在store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新src 目录下创建一个 vuex 目录，vuex下创建...