Vue3总结篇下（看完你就学会整个Vue3）

1.emit

emit() 的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

父组件可以使用 v-on 监听子组件触发的事件——这里的处理函数接收了子组件触发事件时的额外参数并将它赋值给了本地状态

 2.插槽

3.组件方法和传参

子组件触发父组件方法

<template>
	<div @click="confirm ">啦啦啦啦</div>
</template>
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['editConfirm'])
const confirm = () => {
    emit('editConfirm', '要传递的数据')  // 之前子组件修改父组件的数据时需要添加'update:editConfirm'，但是触发父组件的方法不能加'update'
}
</script>
或
子组件
<template>
	<div @click="$emit('editConfirm', '要传递的数据')">啦啦啦啦</div>
</template>
 
 ————————————————————————————————————————————————————父组件
<template>
<child @editConfirm="editConfirm"></child>
</template>
<script setup>
const editConfirm = (val) => {
  console.log(val)
}

父组件触发子组件方法

<childA ref="isA" :isPropData="state.isPropData" />
	
	//获取到子组件
	const isA = ref(null);
	
	onMounted(() => {
	    //修改A组件数据
	    isA.value.state.data = 123
	    //访问A组件数据
	    console.log(isA.value.state.data);
	    //调用A组件方法
	    console.log(isA.value.afn());
	    
	});


import { reactive,defineProps,defineExpose, onBeforeMount, onMounted } from 'vue';
	
	const state = reactive({
	  data:'我是a组件数据'
	});
	
	//a组件方法
	const afn=()=>{
	  console.log('a组件方法执行');
	}
	
	//暴露私有数据与方法
	defineExpose({
	  state,
	  afn
	})

自定义事件配合 v-model 使用 修改子组件input同步响应

<!-- 子组件 -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>


<!--父组件 -->
<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'
  
const message = ref('hello')
</script>

<template>
  <CustomInput v-model="message" /> {{ message }}
</template>

4.组合式函数(逻辑复用)

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'
// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 通过返回值暴露所管理的状态
  return { x, y }
}


<script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

//尽管其响应性不依赖 ref，组合式函数仍可接收 ref 参数。
import { unref } from 'vue'

function useFeature(maybeRef) {
  // 若 maybeRef 确实是一个 ref，它的 .value 会被返回
  // 否则，maybeRef 会被原样返回
  const value = unref(maybeRef)
}
const { qux } = useFeatureC(baz)



自定义指令
<script setup>
// 在模板中启用 v-focus el指令绑定到的元素
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

5.Pinia

ShowStore.js 实际案例

使用store

import { ShowStore } from '@/stores/showStore'

 

pinia持久化

结束语：看完请帮忙点点赞，多多支持  ！！

后续还会修改文档和加新的案例