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>