第Ⅷ章-Ⅱ 组合式API使用
- provide与inject的使用
- vue 生命周期的用法
- 编程式路由的使用
- vuex的使用
- 获取DOM的使用
- setup语法糖
- setup语法糖的基本结构
- 响应数据的使用
- 其它语法的使用
- 引入组件的使用
- 父组件传值的使用
- defineProps 父传子
- defineEmits 子传父
provide与inject的使用
provide 与 inject 是 Vue 3 中用于跨组件树传递数据的 API，适合解决深层嵌套组件的通信问题。
- provide：父组件提供数据。
- inject：子组件接收数据。
<!-- src/App.vue -->
<template>
<div>
<ProviderComponent />
</div>
</template>
<script setup>
import ProviderComponent from './components/ProviderComponent.vue';
</script>
<!-- src/components/ProviderComponent.vue -->
<template>
<div>
<h1>Provider Component</h1>
<ChildComponent />
</div>
</template>
<script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
const providedData = 'Hello from Provider!';
provide('message', providedData);
</script>
<!-- src/components/ChildComponent.vue -->
<template>
<div>
<h2>Child Component</h2>
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { inject } from 'vue';
const message = inject<string>('message', 'Default Message');
</script>
vue 生命周期的用法
Vue 3 引入了组合式 API，使得生命周期钩子以函数形式使用，增加了灵活性。
<template>
<div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
const message = ref('Hello, Vue 3!');
onMounted(() => {
console.log('Component is mounted');
message.value = 'Component Mounted';
});
onBeforeUnmount(() => {
console.log('Component is about to unmount');
});
</script>
编程式路由的使用
Vue Router 支持编程式路由跳转，可以使用 router.push 和 router.replace。
<!-- src/components/NavigationComponent.vue -->
<template>
<div>
<button @click="goToHome">Go to Home</button>
<button @click="replaceWithAbout">Replace with About</button>
<button @click="goBack">Go Back</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goToHome = () => {
router.push('/home');
};
const replaceWithAbout = () => {
router.replace('/about');
};
const goBack = () => {
router.go(-1);
};
</script>
vuex的使用
Vuex 是 Vue 官方的状态管理库，通常使用 createStore 创建全局 store。
// src/store/index.ts
import { createStore } from 'vuex';
interface State {
count: number;
}
const store = createStore<State>({
state: {
count: 0
},
mutations: {
increment(state) {
state.count += 1;
},
decrement(state) {
state.count -= 1;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});
export default store;
在组件中使用 Vuex 状态和方法
<!-- src/components/CounterComponent.vue -->
<template>
<div>
<h2>Counter Example</h2>
<p>Count: {{ count }}</p>
<p>Double Count (getter): {{ doubleCount }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
<button @click="incrementAsync">Increment Async</button>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const count = computed(() => store.state.count);
const doubleCount = computed(() => store.getters.doubleCount);
const increment = () => store.commit('increment');
const decrement = () => store.commit('decrement');
const incrementAsync = () => store.dispatch('incrementAsync');
</script>
获取DOM的使用
在组合式 API 中可以使用 ref 和 onMounted 钩子来访问 DOM 元素。
<template>
<div>
<input type="text" ref="inputElement" placeholder="Type something..." />
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const inputElement = ref<HTMLInputElement | null>(null);
const focusInput = () => {
inputElement.value?.focus();
};
onMounted(() => {
console.log('Component Mounted and DOM is ready');
});
</script>
setup语法糖
setup 语法糖 在 Vue 3.3 中引入，它简化了 setup 函数的使用，使得代码更加简洁易读。
setup语法糖的基本结构
<template>
<div>{{ message }}</div>
<button @click="increment">Increment: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue 3!');
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
响应数据的使用
- ref：创建单一响应式值。
- reactive：创建响应式对象。
- toRefs：将 reactive 对象转换为 ref 对象。
<template>
<div>
<p>{{ message }}</p>
<p>Counter: {{ count }}</p>
</div>
</template>
<script setup>
import { ref, reactive, toRefs } from 'vue';
const message = ref('Hello, Vue 3!');
const state = reactive({ count: 0 });
const { count } = toRefs(state);
</script>
其它语法的使用
- computed：创建计算属性。
- watch：观察响应式数据的变化并执行副作用。
<template>
<div>
<p>Double Count: {{ doubleCount }}</p>
<input v-model="name" placeholder="Name" />
<p>{{ name }}</p>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
const count = ref(2);
const doubleCount = computed(() => count.value * 2);
const name = ref('Alice');
watch(name, (newValue, oldValue) => {
console.log(`Name changed from ${oldValue} to ${newValue}`);
});
</script>
引入组件的使用
<!-- src/App.vue -->
<template>
<CounterComponent />
</template>
<script setup>
import CounterComponent from './components/CounterComponent.vue';
</script>
父组件传值的使用
defineProps 父传子
<!-- src/components/ChildComponent.vue -->
<template>
<p>{{ message }}</p>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
message: String
});
</script>
<!-- src/App.vue -->
<template>
<ChildComponent message="Hello, Child!" />
</template>
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>
defineEmits 子传父
<!-- src/components/ChildComponent.vue -->
<template>
<button @click="sendMessage">Send Message to Parent</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['message']);
const sendMessage = () => {
emit('message', 'Hello from Child Component!');
};
</script>
<!-- src/App.vue -->
<template>
<ChildComponent @message="handleMessage" />
<p>{{ parentMessage }}</p>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';
const parentMessage = ref('');
const handleMessage = (msg: string) => {
parentMessage.value = msg;
};
</script>
