vue3的基础语法
ref定义变量并赋值
<script setup>
// 首先在vue3中引入ref
import {ref, onMounted} from 'vue';
//使用ref定义变量
let value1 = ref(100);
// 改变赋值
onMounted(()=>{
value1.value = 200;
console.log(value1.value,'变量的值')
});
</script>
reactive定义变量并赋值
<script setup>
// 引入reactive
import {ref,reactive,onMounted} from 'vue';
// 定义变量并赋值
let arr = reactive({
arrOne:[100,200,300],
arrTwo:[
{
num:100,
text:'你好'
}
]
});
// 改变赋值
onMounted(() => {
arr.arrOne = [200,400,600];
arr.arrtwo[0] = {
num:200,
text:'改变了'
}
console.log(arr, "当前变量值");
}),
</script>
methods 方法定义
在vue3的setup语法糠中methods方法可以直接定义使用
<template>
<div>
<!-- 年龄 + -->
<h1>{{user.age}}</h1>
<!-- 调用方法 -->
<button @click="ageAdd">年龄增加</button>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
let user = reactive({
name: "张三",
age: 30,
});
//方法
const ageAdd=()=>{
user.age++;
}
//方法调用方法
const getUserInfo=()=>{
addAge()
console.log(user.age)
}
</script>
computed 计算属性
<script setup>
import { ref, reactive, computed } from "vue";
let userInfo = reactive({
name: "张三",
age: 30,
});
//计算属性
const getAge = computed(()=>{
return '我的年龄'+userInfo.age
})
</script>
watch监听的使用
watch(监听数据源,执行函数,[配置参数])
//配置参数: 立即执行 深度监听
{immediate: true, deep: true }
<script setup>
import {ref, watch} from 'vue'
let name = ref('张三')
//监听器
watch(name,(newVal,oldVal)=>{
console.log('变量发生了改变...',newVal);
})
// vue3监听特殊写法,以箭头函数对目标数据进行监听,更优,推荐这种写法
watch(() => props.options,(newVal, oldVal) => {
console.log("99999999999999999");
chart.clear();
chart.setOption(props.options, true);
}
);
</script>
vue生命周期
vue3的生命周期对比vue2有了一定的变化,下面是vue2和vue3的生命周期对比。
vue3的组件使用
组件注册
<template>
<div>
<child></child>
</div>
<script setup>
// 在vue3.2 中当我们导入子组件时,setup语法糖会自动去注册该组件,所以注册语句不需要写了。
import child from './components/child.vue'
</script>
组件传参--父传子
// 父组件传递方式
<template>
<div class="hello">
我是父组件
<!-- 父组件通过:变量(这里是info)绑定值 -->
<Child :info="parentMsg"></Child>
</div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const parentMsg=ref('父组件传递值是a')
</script>
// 子组件接受和使用
<template>
<!-- info是父组件传递过了的值 -->
<div>我是子组件拿到了父组件的值是{{info}}</div>
</template>
<script setup>
import { toRefs, defineProps } from 'vue'
// 直接接收
const props = defineProps({
//子组件接收父组件传递过来的值
info: String,
})
// 设置默认值
const props = defineProps({
info: {
type: String, // 接收的参数类型
default: '默认文字', //默认值
}
})
//使用父组件传递过来的值
const {info} =toRefs(props)
</script>
组件传参--子传父
// 子组件代码
<template>
<button @click="clickChild">点击子组件</button>
</template>
<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits创建名称,接受一个数组
const emit = defineEmits(['clickChild'])
const clickChild=()=>{
let param={
content:'b'
}
//传递给父组件
emit('clickChild',param)
}
</script>
// 父组件代码
<template>
<div class="hello">
我是父组件
<!-- clickChild是子组件绑定的事件,click是父组件接受方式 -->
<Child @clickChild="clickEven"></Child>
<p>子组件传递的值是 {{result}}</p>
</div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const result=ref('')
const clickEven=(val)=>{
console.log(val);
result.value=val.content
}
</script>
vue3路由传参
使用History隐藏参数
1.JSON.stringify(Json)需要把内容转换一下不然不能传
2. JSON.parse(history.state.data)接收时也需要转换一下
3.router.push中的 state 必须是这个名字,不能用query
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter();
router.push(
{
path: "/List",
state:
{
data:JSON.stringify(json)
}
})
<script>
子集接收
<script lang="ts" setup>
import { ref } from "vue";
const tableData = ref([]);
if (history.state.data) {
tableData.value = JSON.parse(history.state.data)
}
console.log(history.state);
<script>
vue3子组件实例方法暴露(导出)方法
vue2中可直接通过父组件内组件的ref读取子组件的实例,vue3有些许区别
vue3中需要在子组件中导出(暴露)相关实例(你需要再父组件中调用)
// 子组件:
const getFileList = () => {
const addFile = getAddFileList();
const delFile = getDelFileList();
return { addFile, delFile };
};
//使用此属性导出实例方法
defineExpose({
getFileList
});
// 父组件:
// 读取子组件实例方法
<MultiFileUpload
ref="uploadFileRef"
/>
const uploadFileRef = ref<any>();
const getFileRef = () => {
const fileData = uploadFileRef.value.getFileList();
return fileData;
};
ps:这些是我之前翻博客,稀土等学习,和工作记下的,希望对大家有所帮助