笔记

Vue2

在 Vue2 中 vc身上的 $attrs 虽然可以接收父组件传递过来的属性(props接收之外的属性)，但是不能做类型限制，并且在模板中使用需要{{$attrs.***}} 。

<子组件>传递参数到子组件的 $slots</子组件>，子组件可以通过显示出来，如果不显示，也可以在子组件的 $slots 中看到传递过来的内容。

Vue3

setup 比 beforeCreate 先执行。
setup 中的 this 是 undefined ，也就是说在 setup 中不要使用 this 。
setup 可以接收2个参数。

视频内容

setup的两个注意点

• setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined。

• setup的参数

  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 Vue2 中的 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit。

源码

App.vue

<template>
    <!-- 给组件绑定的事件 ∈ 自定义事件, 此处的自定义事件为 hello -->
    <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
        <!-- 在Vue3中尽量使用v-slot在给slot命名 -->
        <template v-slot:qwe>
            <span>尚硅谷</span>
        </template>

        <template v-slot:asd>
            <span>尚硅谷</span>
        </template>
    </Demo>
</template>

<script>
    //明确性优先：建议保留 .vue后缀，让导入意图更清晰
    import Demo from './components/Demo.vue'
    //在 Vue3 项目中，通常需要加 .vue后缀，但可以通过配置实现不加后缀。
    //import Demo from './components/Demo'


    export default {
        name: 'App',

        components:{Demo},

        setup(){
            //hello自定义事件的处理函数:
            function showHelloMsg(value){
                alert(`你好啊,你触发了hello事件,我收到的参数是:${value}!`)
            }
            return {
                showHelloMsg
            }
        }
    }
</script>

components\Demo.vue

<template>
    <!-- 给组件绑定的事件 ∈ 自定义事件, 此处的自定义事件为 hello -->
    <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
        <!-- 在Vue3中尽量使用v-slot在给slot命名 -->
        <template v-slot:qwe>
            <span>尚硅谷</span>
        </template>

        <template v-slot:asd>
            <span>尚硅谷</span>
        </template>
    </Demo>
</template>

<script>
    //明确性优先：建议保留 .vue后缀，让导入意图更清晰
    import Demo from './components/Demo.vue'
    //在 Vue3 项目中，通常需要加 .vue后缀，但可以通过配置实现不加后缀。
    //import Demo from './components/Demo'


    export default {
        name: 'App',

        components:{Demo},

        setup(){
            //hello自定义事件的处理函数:
            function showHelloMsg(value){
                alert(`你好啊,你触发了hello事件,我收到的参数是:${value}!`)
            }
            return {
                showHelloMsg
            }
        }
    }
</script>