vue中常用到的一些解决问题方法（整理一些真正有效能够使用到项目中的方法）（等待不断更新积累）_has no default export.vetur

目录

创建项目：参考如下链接

下拉选择框，点击下拉后，竟然会出现我保存在浏览器的输入记录，导致我的下拉列表被遮挡

vue中使用多个class

获取路由参数

父组件传值给子组件

 子组件传值给父组件

内联样式

动态绑定style

vue点击事件如何传参

 加载路由时报错 net::ERR_ABORTED 500 (Internal Server Error)     Failed to fetch dynamically imported module

引入ts

ts报错：Module ‘“xx.vue“‘ has no default export.Vetur

根据路由跳转参数，动态改变导航栏标题

报错：set operation on key failed :target is readonly

vue 3 ref和reactive定义的数据如何修改

跨域

报错：failed to load module script

vite打包之后变量丢失

input输入框，实际值和显示值不一致

vue3中监听值的变化

keep-alive缓存页面

• 创建项目：参考如下链接

安装 | Vue CLI

• 下拉选择框，点击下拉后，竟然会出现我保存在浏览器的输入记录，导致我的下拉列表被遮挡

  autocomplete="new-password"

<el-select v-model="province" autocomplete="new-password"></el-select>

• vue中使用多个class

<span class="class1 class2">多个class</span>

• 获取路由参数

watch: {
    //第一种方法
    $route:{
        handler(newRouter){
            console.log(newRouter.query.xxx)
        }
    },
    //第二种方法
    '$route.query.xxx'(Val) {
      console.log(Val)
    },
},

• 父组件传值给子组件

父组件

<template>
    <div>
        <ntable 
            :getdata="getdata"  
            :mockData="mockData"
        ></ntable>
 
    </div>
</template>
<script>
...
export default {
    data(){
        return{
            mockData:{
            	name:'张三',
            	age:'12'
            }
        }
    },
    components:{
        ...,
    },
    methods:{
        getdata(){
            return this.mockData;
        },
    },
}
</script>

子组件

<template>
    <div>
        <button @click="getParentData">{{mockData.name}}</button>
    </div>
</template>
<script>
export default {
    props:{	//  在props中接收父组件传过来的值
        getdata:{
            type:Function
        },
        mockData:{
            type:Object,
            default:()=>{
                return {};
            }
        }
    },
    methods:{
        getParentData(){
            var data = [];
            this.getdata(); // 父组件传过来的方法在这里调用
        },
    }
}
</script>

•  子组件传值给父组件

vue2

父组件

<template>
    <div>
        <ntable 
            @setTableData="setableData" 
        ></ntable>
 
    </div>
</template>
<script>
import ntable from '@/components/ntable'
export default {
    data(){
        return{
            actionFun:undefined,
        }
    },
    components:{
        ntable,
    },
    methods:{
        setableData(data){
            this.actionFun = data;
        },
    },
}
</script>

子组件

<template>
    <div>
    </div>
</template>
<script>
export default {
    mounted(){
        this.$emit('setTableData',this.setTableData);/* 向外暴露set方法 */
    },
    methods:{
        setTableData(data){
        	// do something
        },
    }
}
</script>

 vue3

父组件

<template>
    <div>
        <children-dom :show="show" @close="close"></children-dom>
 
    </div>
</template>
<script>
import childrenDom from '@/components/childrenDom'
import { ref,} from 'vue'
const show = ref(false);
const close=()=>{
    show.value = false
}
</script>

子组件

<template>
    <div @click="confirm">
    </div>
</template>
<script setup>
const emit = defineEmits(['close']) //接收父组件数据
defineProps({
    show: {
        type:Boolean,
        default:false,
    }
})
const confirm=()=>{
    emit('close')
}
 
</script>

 vue3之语法糖script setup的父子组件、兄弟组件传值_怡暘的博客-CSDN博客

• 内联样式

<template>
    <div :style="{'height':rightHeight+'px','overflow':'auto'}">
    </div>
</template>
<script>
export default {
    data(){
        return{
            rightHeight:111,
        }
    },
}
</script>

• 动态绑定style

 
<div :style="[{'background':`url(${userImg}) no-repeat center`},{'background-size': 'cover'}]"></div>
 
<div :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"></div>
 
<div :style="{'border-bottom':index>1?'1px solid red':'none','padding-bottom':index>1?'1px':'0'}"></div>

• vue点击事件如何传参

<template>
<div @click="say($event,'hi')">Say hi</div>
</template>
<script>
methods:{
    say(e,value){
        console.log(value)
    }
}
</script>

•  加载路由时报错 net::ERR_ABORTED 500 (Internal Server Error)     Failed to fetch dynamically imported module

重新启动项目npm run dev即可 

• 引入ts

npm i typescript -save

<script lang="ts">
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
  methods: {
  },
};
</script>

• ts报错：Module ‘“xx.vue“‘ has no default export.Vetur

卸载vetur，安装volar插件，重启下VS Code

• 根据路由跳转参数，动态改变导航栏标题

router.js文件内

 页面跳转处

• 报错：set operation on key failed :target is readonly

 正确写法：

 之前报错的错误写法

• vue 3 ref和reactive定义的数据如何修改

const a = ref('add');
const b = reactive({data:{}})
 
const getData=()=>{
//修改a的字符串   
a.value = 'edit'；
//修改b的对象值
b.data = {
      name:'小明',
      age:12
    }
}

• 跨域

• 报错：failed to load module script

 是由于当前页面过久没刷新，而其他人已经重新打包发布

解决办法：给一个提示，让用户刷新页面

• vite打包之后变量丢失

VUE3在本地运行的时候正常，打包之后却显示变量未定义

通过defineProps传进来的变量，在当前页面被修改，需要额外定义一个变量去设置修改的值。如果传进来的值只是作为展示，那么不需要额外设置一个值

 

• input输入框，实际值和显示值不一致

• vue3中监听值的变化

// 监听单个数据的变化
const state = reactive({a: 1,b:2})
watch(
	()=> state.a,
	(newValue, oldValue)=> {
		// ... 微队列调用
	},
	options // 配置参数对象 如immediate
)
const count = ref(0)
watch(
	count,
	(newValue, oldValue)=> {
		// ...
	},
	options // 配置参数对象 如immediate
)
// 监听多个数据的变化
watch(
	[()=> state.a, count],
	([newValue1, newValue2], [oldValue1, oldValue2])=> {
		// ...
	},
	options
)

• keep-alive缓存页面

1、vue2中使用keep-alive
将“router-view”组件包含于“keep-alive”即可

<keep-alive>
      <router-view />
</keep-alive>

此时组件将保留状态，或避免重新渲染。

2、vue3中使用keep-alive
vue3的keep-alive应用相对于vue2有所变化，此处描述vue3时如何使用，详情可见：Vue Router文档

 

 

 

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>