Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的组件, this指向发生改变,所以通过以下办法解决. var _this = {} export default { data(){ return { msg: '11' } }, beforeCreate(){ _this = this; }, mounted(){ VueEvent.$on('t…

在观看了b站的关于Vue3的教学视频后,对Vue的根组件与组件树进行简单的总结下 一.实例化Vue应用 // 此时,app就是一个Vue应用的实例,或者说是一个对象 const app = Vue.createApp({}) 需要注意的是这个app并不是根组件,而是Vue应用的实例. 二.根组件的挂载 了解组件的话,我们知道在组件中,一般都会有一个template属性,那么根组件的template是什么呢?这里就需要提到我们的挂载了 <div id="app"></d…

在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过this.$emit将事件发射到Home组件中,又在Home中监听自定义事件,比较复杂.因此,我们直接在Home中对BackTop组件进行监听,使用 .native 官网对于native的解释为: .native:监听组件根元素的原生事件 代码如下: 在Home.vue中对back-top组件进行点击事件…

Vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要. 常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provide / inject ref $attrs / $listeners 兄弟组件通信: eventBus Vuex 跨级通信: eventBus Vuex provide / inject $attrs / $listeners 一.props / $emit (最常用的组建通信方式) 父组件通过p…

写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们很有必要写成一个通用 的组件形式,在需要的地方之间引用. 现在我们来动手实现一个对话框组件 ,按照之前的习惯,我们先看下实现的效果图 1.首先,通过template定义一个组件 <template id="dialog"> <div class="dialog&…

之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为JavaScript模块.一.基本组成单文件组件中包含<template>.<script>.<style>三种代码块.<template>默认语言是html,内容将被提取为字符串,编译结果作为Vue组件的template选项,一个.vue文件最多包含一个<…

今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件名,本次系统写的比较简单... 此处::is='组件名'可以直接条用组件. 因为全页面有十个组件加载,所以用到了循环.数组.就遇到了在方法里可以打印数组里的值,但绑定组件名的地方获取不到的问题. 后来加上了一个数组b,并把b数组的值赋值给a.a就可以获取到了.就是实现了动态加载组件. 二.观察者模式…

vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数据自动渲染展示在表格中,预览展示10条,不足10条的的用空行表示.可通过下拉框动态切换对应列的值.图片保存到系统中是将有src属性的img值替换为后台传递过来的七牛云地址,导入完成后,部分导入失败的数据可以下载到本地查看 导入的excel文件 使用该导入功能需安装依赖 npm install xls…

我用的VS Code编译器,首先打开终端,进入项目(我是在13-vue文件夹下面的elem中使用) D:\study\web\13-vue\elem> cnpm install vue-awesome-swiper --save 然后在main.js中引用并使用 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 新建一个sw…

自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model 用法: 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data"进行传递 默认传递的属性名是value,事件名为input.可以在子组件中配置model选项重命名属性名和事件名 子组件props接受名称为value的属性(固定名),通过$emit(&q…