Kratial的博客

问题实例： // 子组件 <template>> <div @click.stop="sendInfo">我是子组件</div> </template> <script> export default { methods: { sendInfo(){ this.$emit('sendInfo',{message:'childdata'}) } } } // 父组件 <template>&g

【代码】vue项目的业务页面中访问static静态资源，点击下载时报未发现文件。

1.问题：在Vue项目开发中遇到根据登录来判断页面跳转时遇到这个问题 2.错误代码如下： const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) const token = store.getters.getToken router.beforeEach((to, from, next) => { if (!token) { next({ paht: '/e

1.环境： 框架：vue 版本：vue-cli4 在vue.config.js中配置 module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "xxxxxxx.scss"; ` }, } } }

需求: 同一个域名下面要配置多个项目时，如何去区分不同的项目 解决方案： 需要给每个项目添加一个前缀。 具体执行:（这里我用到的是vue-cli3) (1)首先需要在vue.config.js中配置如下的两个属性： publicPath: process.env.NODE_ENV === 'production' ? '/mobile/' : '/', outputDir: 'dist/mobile', (2)其次需要在router里面配置base属性： const .

1.在终端中输入sudo vim /etc/hosts 回车然后输入密码。2.若出现如下图所示（若没有则直接输入i,然后进行后续操作)，请输入E。然后输入i，移动到最后一行输入127.0.0.1 localhost。3.按esc退出编辑，然后输入:wq保存并推出。4.然后重启项目就可以了。

使用vanUI的list组件，多个tab项切换列表加载多次

1.问题描述： 当前所处路由：/test?id=1, 点击按钮后，地址栏变化为：/test?id=2, 但是视图没有更新 报错如下所示： Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/test?id=2 2.解决报错需要在router.js文件中添加如下代码： const oldPush = VueRouter.prototype.push VueRoute

问题描述：当子组件的props接收的是数组时，书写成如下： props:{ dataList:{ type:Array, default: [] } }, 报错如下： 修改如下： props:{ dataList:{ type:Array, default: function(){return []} } }, ...

关于父组件监听子组件的生命周期有两种方式： 1.通过this,$emit(），v-on来处理 父组件： <template> <div class="home"> <h1>我是首页</h1> <detail-page @created="handlecreated" @mounted="handlemounted" @beforeDestory="hanldebeforeDestory"> </de

组件的嵌套关系如下： grandpa>father>son 1.vm.$attrs: 使用场景：孙子组件想要拿到爷爷组件的信息且不借助于于vuex的情况下可以利用此来实现 (1)描述： vm.$attrs 在子组件不通过props取数据的情况下： 1.通过this.$attrs可以拿到父组件传递过来的所有数据， 2.孙子组件上添加v-bind="$attrs",那么孙子组件中就可以访问到爷爷组件传递给爸爸组件，以及爸爸组件传给儿子组件的所有数据, 通过props接收的数据项无法在$attrs中

问题关于父组件以及嵌套的子组件创建和挂载的顺序是怎么样的呢？如下图所示：

1.问题： 将data属性的值在setTimeout中修改了，但是页面上面没有渲染出来变化的值 2.问题原因： this指向问题 ，正常情况下this指向的是vue实例，而在setTimeout中this指向的是window 3.解决办法： 改变setTimeout中的this指向即可 ...

1.v-model本质上是value和oninput事件的语法糖 2.其实相当于是v-on,v-bind的结合 3.示例如下： <input v-bind:value="msg" v-on:input="msg=$events.target.value"/>

1.方式一 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&

前言：vue,react ,angular—前端框架—基于模块化组件化的开发模式 搭建vue开发环境： 1.要安装nodejs 2.搭建vue的开发环境，安装vue的脚手架工具（官方命令行工具) npm install --global vue-cli 3.创建项目： vue init webpack 项目名称 cd 项目名称 cnpm insatll npm run dev ...

组件间的通信: 1.同级组件间的通信: （１）同级组件之间沟通的桥梁：vue实例，创建一个event.js, 里面引入vue实例 import vue from’vue’; const vm=new vue(); export default vm; （２）在各个要通信的同级组件中引入event.js import vm from ‘…/event.js’; （３）发送方：vm.emit(‘随便创...

1.修改config文件夹下面的index.js文件 找到host: ‘localhost’,修改为：host: ‘0.0.0.0’ module.exports = { dev: { ...... host: 'localhost', // can be overwritten by port: 8080, // can 2.运行在命令行输入：npm run dev ...