vue3 学习记录

props

组合式组件 使用<script setup >

<script setup>// const props = defineProps(['title']) // 以数组方式const props = defineProps({title: String,}) // 以对象方式，声明类型console.log(props.title)
</script>
<template><span>{{title}}</span>
</template>

组合式组件 没有使用 <script setup>

<script>export default{props: ['title'],setup(props){console.log(props.title);}}
</script>

选项式组件 this

<script>export default {props: ['foo'],created() {// props 会暴露到 `this` 上console.log(this.foo)}}
</script>

emits

组合式组件 使用<script setup >

<script setup>import {ref} from 'vue'const formValue = ref({})// const emit= defineEmits(['submit']) // 以数组方式const emit = defineEmits({submit(payload: { email: string, password: string }) {//通过返回值为 `true` 还是为 `false` 来判断验证是否通过if (email && password) {return true} else {console.warn('Invalid submit event payload!')return false}}})// 以对象方式，声明类型function buttonClick() {emit('submit', formValue.value)}
</script>
<template><button @click="emit('submit', formValue)">提交</button >
</template>

组合式组件 没有使用 <script setup>

<script>export default{emits: ['inFocus', 'submit'],setup(props, ctx) {ctx.emit('submit')}}
</script>

选项式组件 this

<script>export default {data: ()=>{return {formValue: {}}},emits: {click: null, // 没有校验// 校验 submit 事件submit: ({ email, password }) => {if (email && password) {return true} else {console.warn('Invalid submit event payload!')return false}}},methods: {submit() {this.$emit('submit',this.formValue)}},}
</script>
<template><button @click="$emit('submit', formValue)">提交</button >
</template>

v-model 组件数据绑定

单个model

// Parent.vue
<Child v-model="countModel" />// Child.vue
<script setup>const model= defineModel()function buttonClick() {model.value++}
</script>
<template><input v-model="model" /><div>Parent bound v-model is: {{ model }}</div>
</template>

多个model

// Parent.vue
<Child v-model:first-name="first"v-model:last-name="last" 
/>// Child.vue
<script setup>const firstName = defineModel('firstName')const lastName = defineModel('lastName')
</script>

实现 model 修饰符

// Parent.vue
<Child v-model.capitalize="myText" />// Child.vue
<script setup>const [model, modifiers]= defineModel({set(value){if(modifiers.capitalize){return value.charAt(0).toUpperCase() + value.slice(1)}else{return value}}})
</script>
<template><input type="text" v-model="model" />
</template>