prop
prop修改
1、子组件中无法直接修改prop的参数
2、子组件中定义的常量tmp,触发click事件后,tmp值发生变化,但是页面并不会发生变化
<template>
<button @click="click">{{ tmp}}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref } from 'vue';
const props = defineProps({
name: String,
})
let tmp=1
const message=computed(()=>{
return tmp;
})
const click = () => {
tmp++;
console.log(tmp)
}
</script>
3、用ref包装解决响应式问题
<template>
<button @click="click">{{ tmp}}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref } from 'vue';
const props = defineProps({
name: String,
})
let tmp=ref(1)
const message=computed(()=>{
return tmp;
})
const click = () => {
tmp.value++;
console.log(tmp)
}
</script>
4、通过子组件emit事件修改父事件的prop
父组件
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!-- <HelloWorld></HelloWorld> -->
<NameVue :name=msg @change="change"></NameVue>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue';
import NameVue from './components/Name.vue';
import {ref} from 'vue'
let msg = ref("1234")
const change=(para)=>{
console.log(msg)
msg.value=para;
console.log(msg)
}
</script>
子组件
<template>
<button @click="click">{{ props.name}}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref,defineEmits } from 'vue';
const props = defineProps({
name: String,
})
//ref复制原值,相当于prop修改后不会触发tmp的改变
let tmp=ref(props.name)
const emit = defineEmits(['change'])
const click = () => {
emit('change',"0000")
}
</script>
5、计算属性的值随参数原值变化而变化,每次调用均会触发计算
6、子组件通过emit使得父组件传递给子组件的props变化,如果在子组件监听props的变化,并且在watch函数中触发emit将会导致循环调用
父组件
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!-- <HelloWorld></HelloWorld> -->
<br>
<NameVue :name=msg @change="change"></NameVue>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue';
import NameVue from './components/Name.vue';
import {ref} from 'vue'
var msg = ref(123)
const change=(para)=>{
msg.value+=para;
}
</script>
子组件
<template>
<button @click="click">{{ props.name }}</button>
</template>
<script setup lang="ts">
import { computed, defineProps, ref, defineEmits
,watch } from 'vue';
interface Props {
name?: number
}
const props = withDefaults(defineProps<Props>(), {
name: 0,
})
const emit = defineEmits(['change'])
const click = () => {
emit('change',1)
}
watch(props,(val)=>{
console.log(val);
emit('change',1);
})
</script>
v-model使用
1、v-model:value的使用
默认情况下,组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称:
下面两者等价,其中update:title方法默认修改title的值,其中子组件必须emit update:title的事件
<my-component v-model:title="bookTitle"></my-component>
<my-component :title="bookTitle" @"update:title"></my-component>
直接使用v-model=“xxx”
等价于:v-model:modelValue=“xxx”
//App.vue
<script>
import CustomInput from './CustomInput.vue'
export default {
components: { CustomInput },
data() {
return {
message: 'hello'
}
}
}
</script>
<template>
<CustomInput v-model="message" /> {{ message }}
</template>
//CustomInput .vue
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
等价于
//App.vue
<script>
import MyComponent from './MyComponent.vue'
export default {
components: { MyComponent },
data() {
return {
title: 'v-model argument example'
}
}
}
</script>
<template>
<h1>{{ title }}</h1>
<MyComponent v-model:title="title" />
</template>
//MyComponent.vue
<script>
export default {
props: ['title'],
emits: ['update:title']
}
</script>
<template>
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
</template>
ref操作dom元素
1、通过:ref来计算js表达式
2、ref的操作元素名称必须在下方中通过ref()命名相同元素
<template>
<button @click="click">{{ props.name }}</button>
<!-- ref=asd123 -->
<div :ref="'asd' + props.name.toString()" @click="hideshow">{{ props.name.toString() + 'asd' }}</div>
</template>
<script setup lang="ts">
import {
computed, defineProps, ref, defineEmits
, watch
} from 'vue';
let asd123 = ref(null);//refs
interface Props {
name?: number
}
const props = withDefaults(defineProps<Props>(), {
name: 0,
})
let show = ref(false)
const emit = defineEmits(['update:name'])
const click = () => {
if (asd123.value.style.display == '') {
asd123.value.style = "display:none"
} else {
asd123.value.style = "display:''"
}
}
const hideshow = (a: MouseEvent) => {
console.log(a)
console.log(asd123.value)
console.log(asd123.value.style.display)
}
</script>
onMounted
onMounted加载时页面已经完成渲染,因此如果使用非响应式的变量,会导致页面初次渲染的时候未能渲染出该节点(该节点通过判断该变量来渲染)
vue3.0变量范围
onMounted定义的变量无法被computed的计算属性获得
可以理解为computed发生在onMounted之前
onMounted(()=>{
console.log(props.cellValue)
let a = 1;
console.log(a)
})
const formState = computed(() => {
console.log(a + 1)
});
computed使用
只有当依赖的响应式属性变化了,计算属性才会重新计算。
计算属性应包含(响应式变量)
A0变化的时候会打印执行computed
A1变化的时候则会打印出 执行computed 执行computed3
const tet = ()=>{
A0.value++
}
const tet1 = ()=>{
A1.value++
}
const A0 = ref(0)
const A1 = ref(1)
const A2 = computed(() => {
console.log('执行computed')
return A0.value + A1.value
})
const A3 = computed(() => {
console.log('执行computed3')
return A1.value
})
v-for v-model共同使用
<tr v-for="(m,i) in array" :key="i">
<td>
<Textarea v-model:value="array[i].xxx"></Textarea>
</td>
</tr>
vue3.0常用写法
<ModifyCompare :orderInfo="props.orderInfo"></ModifyCompare>
<img src="/src/assets/arrow.png" style="width:25px">