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.getTokenrouter.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 redundantnavigation to current location: "/test?id=22.解决报错需要在router.js文件中添加如下代码：const oldPush = VueRouter.prototype.pushVueRoute

问题描述：当子组件的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>son1.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指向的是window3.解决办法：改变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"/>

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

组件间的通信:1.同级组件间的通信:（１）同级组件之间沟通的桥梁：vue实例，创建一个event.js,里面引入vue实例import vue from’vue’;const vm=new vue();export default vm;（２）在各个要通信的同级组件中引入event.jsimport 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, // can2.运行在命令行输入：npm run dev ...

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&