Vue3+Ts<script setup>组合式API的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject、Ref用法
一、页面效果图二、父组件代码<template><div class="user-box"><div><h2>父组件:</h2><p>propRef:{{ propRef }}</p><p>propReactive:{{ propReactive }}</p></div><
·
一、页面效果图
二、父组件代码
<template>
<div class="user-box">
<div>
<h2>父组件:</h2>
<p>propRef:{{ propRef }}</p>
<p>propReactive:{{ propReactive }}</p>
</div>
<div>
<Child :propRef="propRef" :propReactive="propReactive" @emitValue="getEmitValue" ref="childRef" />
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, nextTick, toRefs, computed, provide } from 'vue';
import Child from './components/Child.vue'; //引入子组件
const childRef = ref(); //定义子组件的ref
const propRef = ref('我是父组件通过Ref定义的值'); //定义传入子组件的值
const propReactive = reactive({ name: '我是父组件的通过Reactive定义的值', path: 'index' }); //定义传入子组件的对象
const provideValueData = reactive({ name: 'provide', type: 'object' }); //定义provide传入子组件的对象
provide('provideValue', provideValueData); //通过provide发射给子组件
//
function getEmitValue(value) {
console.log('子组件emit的值', value);
}
onMounted(() => {
console.log('打印子组件的ref对象', childRef.value);
});
</script>
<style type="text/css" lang="less">
.user-box {
padding: 20px;
}
</style>
三、子组件代码
<template>
<div>
<h2>子组件:</h2>
<div>
<h3>Props:</h3>
<p>propRef:{{ propRef }}</p>
<p>propReactive:{{ propReactive }}</p>
<p>propDefault:{{ propDefault }}</p>
</div>
<div>
<h3>Computed:</h3>
<p>computerMode1:{{ computerMode1 }}</p>
<p>computerMode2:{{ computerMode2 }}</p>
</div>
</div>
<div>
<h3>Emit:</h3>
<a-button type="primary" @click="emitToParent">Emit给父组件</a-button>
</div>
<div>
<h3>Watch:</h3>
<a-button type="primary" @click="addWatch">触发Watch</a-button>
</div>
<div>
<h3>inject</h3>
<div>data:{{ provideValue }}</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, watchEffect, defineEmits, defineProps, withDefaults, inject } from 'vue';
/*定义父组件传过来Props值的类型 start */
interface Props {
propRef: string;
propReactive: any;
propDefault?: string;
}
//接收父组件传过来的值设置默认值
const props = withDefaults(defineProps<Props>(), {
propRef: '',
propReactive: { name: '', path: '' },
propDefault: '',
});
/*定义父组件传过来Props值的类型 end */
/* inject接收父组件provide传过来的值 start */
const provideValue = inject('provideValue');
/* inject接收父组件provide传过来的值 end */
/** emit使用 start */
//注册emit
const emits = defineEmits(['emitValue']);
//定义emit的值
const emitValue = ref('我是子组件的emit,我被发射了');
//通过定义的emits将值发射到父组件
function emitToParent() {
emits('emitValue', emitValue.value);
}
/** emit使用 end */
/** watch 使用start */
//定义watch被监听的值
const watchValue = ref(1);
function addWatch() {
watchValue.value++;
}
watch(
watchValue,
(oldValue, newValue) => {
console.log('[ oldValue,newValue ]', oldValue, newValue);
},
{ immediate: true, deep: true }
);
/** watch 使用end */
/* watchEffect start */
watchEffect(() => {
console.log('通过watchEffect监听watchValue的值的变化:', watchValue.value);
});
/* watchEffect end */
/** 计算属性 start */
//定义计算属性值
const computedValue1 = ref(1);
const computedValue2 = ref(10);
//写法一
const computerMode1 = computed(() => {
return computedValue1.value + computedValue2.value;
});
//写法二
const computerMode2 = computed({
get() {
return computedValue1.value + computedValue2.value;
},
set() {
return computedValue1.value + computedValue2.value;
},
});
/** 计算属性 end */
/* 定义被父组件可以访问的值或方法 start */
const childValue = ref('我是子组件的值');
function childFunction() {
console.log('我是子组件的方法');
}
/* 定义被父组件可以访问的值或方法 end */
/* 只有defineExpose暴露的值或方法才能被父组件通过ref访问 start */
defineExpose({
childValue,
childFunction,
});
/* 只有defineExpose暴露的值或方法才能被父组件通过ref访问 end */
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)