uni-app 組件傳值及插槽


留存,備用。

(公共部分)

<!-- 子組件(公共組件) -->
		<view class="s-tou">
			<view class=" s-zuo" v-if="yaobuyao == 1"><slot name="zuo"></slot></view>
			<view class=" s-zuo" v-else>
				<image class="s-fanhui" @click="fanhui" src="@/static/images/s-fanhui.png" alt=""></image>
			</view>
			<view class="s-sa s-zhong" :title="title">{{ title }}</view>
			<view class=" s-you"><slot name="you"></slot></view>
		</view>
		<!-- props -->
		<script>
			props: {
				title: '',
				yaobuyao: ''
			},
		</script>
		<!-- 手機顯示電量的那一條 -->
		height: calc(var(--status-bar-height));
		height: calc(var(--status-bar-height) + 88upx);

  

(引用公共部分)

		<!-- 父組件(引用公共部分) -->
		<toubu :title="title" :yaobuyao="yaobuyao">	
			<image slot="you" class="s-sao" @click="saoyisao" src="../../static/images/saoyisao.png" alt="" />
		</toubu>
		<!-- 把公共部分引進來 -->
		<script>
			import toubu from '../../components/toubu/toubu.vue';
			export default {
				components: {
					toubu
				},
			}
			data() {
				return {
					title: '個人中心',
					yaobuyao:'1',
				};
			},
		</script>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM