<template>
<div>
{{ msg }}
<button @click="handleclick">{{ msg }}</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
let msg=ref("hello world")
const handleclick=()=>{
alert(msg.value)
msg.value="lsh"
}
</script>
ref响应式数据msg改了页面也变化
<template>
<div class="about">
{{ state.name }}年龄是{{ state.age }}
</div>
</template>
<script setup>
import {reactive} from "vue";
const state = reactive({
name:'lsh',
age:21
})
</script>
reactive({})响应式对象
<template>
<div>
{{ name }}age是{{ age }}
</div>
</template>
<script setup>
import {reactive,toRefs} from "vue";
const state = reactive({
name:'lsh',
age:21
})
const {name,age} = {...toRefs(state)}
</script>
toRefs解构reactive对象里的数据
<template>
<div>
{{ computedname }}
</div>
</template>
<script setup>
import {reactive,toRefs,computed} from "vue";
const state = reactive({
name:'lsh',
age:21
})
const {name,age} = {...toRefs(state)}
const computedname=computed(()=>name.value.substring(0,2).toUpperCase()+name.value.substring(2)
+'年龄是'+age.value
)
</script>
computed计算出的属性在div中直接用。substring(0,2)指的是剪切数组[0,2),substring(2)指删掉[0,2),以上结果LSh
child.vue
<template>
<div>
儿子组件标题是{{ title }}
<div>父组件传过来的标题{{ props.title }}</div>
</div>
</template>
<script setup>
const props=defineProps({
title: {
type: String,
default:"无"
}
})
</script>
父组件引用child.vue传值
传值结果
不传值<child></child>结果
子组件怎么传值给父组件呢?另个案例
父组件
子组件child.vue
<template>
<div>
<button @click="posthome">子发送给父组件</button>
</div>
</template>
<script setup>
const props=defineProps({
title: {
type: String,
default:"无"
}
})
const emit=defineEmits(["right"])
const posthome=()=>{
emit("right","来自子组件的问候")
}
</script>
$reset()重置为初始值
pinia的组合式store怎么写呢
路由传参,首页.vue
<router-link :to="{ path: '/wz', query: { index: index } }" class="card mb-3">
<img :src=item.imgurl class="card-img-top">
<h4 class="card-title">{{ item.title }}</h4>
</router-link></div>
文章.vue要用route接收传过来的index
import { useRoute } from 'vue-router';
const route = useRoute();
const index = route.query.index;
const getwz=async()=>{
const res=await request(`/getwz?index=${index}`)