自定义组件

在src根目录下新建components文件夹，在使用自定义组件时Vue3会自动引入（使用的名称要与组件文件名相同）

使用自定义组件

<demo></demo>

父子组件间传值

父子组件间传值通常父组件采用自定义属性，接收方使用props的方式

父组件向子组件传值（自定义属性）

父组件

<demo :name="people.name" :age="people.age"></demo>

子组件

//接收传入参数
const props = defineProps({
    name: {
        type: String,//规定接收的值类型
        default: '123'//默认值
    },
    age: {
        type: String,
        default: '30'
    }
})

vue3+ts写法

type props = {
    /* 是否黑色按钮样式 */
    isBlack: boolean
    /* 是否显示首页按钮 */
    showHome: boolean
    num: number[]
}
const props = withDefaults(
    defineProps<props>(),
    {
        isBlack: true,
        showHome: true,
        num: () => [1, 2, 3]//复杂数据类型使用函数方式
    }
)

子组件向父组件传值（自定义事件）

父组件

<demo @hello="hello"></demo>
<script setup>
    //接收子组件传递过来的数据
    function hello(e) {
        console.log('子组件传入父组件数据', e)
    }
</script>

子组件

//接收父组件传递过来的自定义事件
const emits = defineEmits(['hello'])
//发送给父组件数据
const gethello = () => {
    emits('hello', {
        name: '123'
    })
}

函数式调用组件（适用于H5）

此方式需要用到网页的顶级对象document,而微信小程序和app没有此对象，因此只使用于H5

编写组件

组件部分没有需要注意的地方，跟平常一样peops接收值就行

<template>
    <div class="container_text">
        <div class="title">{{props.text}}</div>
        <button @click="props.onclose()">关闭组件</button>
    </div>
</template>

const props = withDefaults(defineProps<{ text: string, onclose: () => void }>(), {
    text: '测试组件2132132123123',
    onclose: () => {
    }
})

新建组件注册的ts文件

//组件通过ji调用实例
//导入渲染组件的方法
import {createApp} from "vue";
//导入需要调用的组件
import Text from "../components/text.vue";

/**
 *
 * @param text string 需要显示爹信息
 * @param close fn() 再关闭弹窗前的函数
 */
export const message = (text: string, close) => {

    // console.log('获取到的参数',text)
    const div = document.createElement('div')
    document.body.appendChild(div)
    const app = createApp(Text, {
        text,
        onclose() {
            close(() => {
                app.unmount()
                div.remove()
            })
        }

    })
    app.mount(div)
}
export default message

调用

import message from "../commen/message";

const onclick = () => {
    message('显示组件12313123', (close) => {
        console.log(123)
        close()
    })
}

插槽

• 在vue3里插槽必须放在template标签中并用v-slot:名字 命名
• 插槽简写形式 #名字

父级作用域插槽（使用的数据来自于父级）

父级

<demo>
    <template #title>
        <view class="title">头部 父子作用域传递插槽</view>
        <view class="name">插槽：{{people.name}}</view>
        <view class="name">插槽：{{people.age}}</view>
    </template>
</demo>

子级

<slot name="title"></slot>

子级作用域插槽（使用的数据来自于子级）

在上面的渲染作用域中我们讨论到，插槽的内容无法访问到子组件的状态。 然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

我们也确实有办法这么做！可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes：

父级

<demo>
    <template #floor="{item}">
        <view class="title">底部部 子级作用域传递插槽</view>
        <view class="name">插槽：{{item.name}}</view>
        <view class="name">插槽：{{item.text}}</view>
    </template>
</demo>

子级

<slot name="floor" :item="item"></slot>

vue3 scss 深度选择器

在style标签内如果写了scoped父组件并不能修改子组件的样式
此时使用深度选择器::v-deep

    ::v-deep .uni-list-item {
  padding: 10 rpx;

  .uni-list-item__content-title {
    font-size: 34 rpx !important;
  }
}