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>