uniProject/pages/newEnglish/components/readContent.vue

<template>
	<view>
		<selectTypesVue activeSelect="3"></selectTypesVue>
		<view class="words-xuan-box">
			<!-- 单词区 -->
			<view class="show-words-box"> {{data.name}} </view>
			<!--  音标区  -->
			<view class="yb-play-box">
				<text>{{data.yinbiao}}</text>
				<!-- active -->

				<icon class="yb-play-btn"></icon>
				<icon class="yb-playing-btn" v-if="false"></icon>
			</view>

			<view style="text-align: center;">
				<text v-if="data.jianyi&&data.jianyi.length>0" v-for="(item,index) in data.jianyi"
					:key="index">
					{{item}}
				</text>
			</view>

			<view>
				<view class="audio-play-btn"></view>
				<!-- 播放中 -->
				<view class="audio-playing-btn" v-if="false"></view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	const props = defineProps({
		activeWord: {
			type: Object,
		},
		pageData: {
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})
	let tabFlag = ref(1)
	const audioInfo = ref(null)

	const data = reactive({
		name: '',
		yinbiao: '',
		jianyi:[]
	})

	onLoad(() => {
		initItem()
	})

	function initItem() {
		console.log('data',data);
		data.name = props.activeWord.name;
		data.yinbiao = props.activeWord.yinbiao;
		data.jianyi = props.activeWord.jianyi;
	}
</script>

<style>
</style>