Vue3 父子组件通过事件通信

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件。 官方文档介绍

model不带参 默认就为modelValue可以进行传值 下面案例还用到了自定义修饰符 可以通过this.modelModifiers.修饰符 查看是否传入修饰符

<div id="root"></div>

<script>
    const app = Vue.createApp({
        data(){
            return {count:'a'}
        },
        template:`
            <div>
                <count v-model.uppercase="count"></count>
            </div>
        `
    });  

    app.component("count",{
        props:{
            'modelValue':String,
            // 不传递默认为空对象 传递则为true
            'modelModifiers':{
                default:()=>({})
            }
        },
        methods:{
            handleClick(){
                let newValue = this.modelValue+'b'
                if(this.modelModifiers.uppercase){
                    newValue=newValue.toUpperCase()
                }
                this.$emit("update:modelValue",newValue)
            }
        },
        template:`<div @click="handleClick">{{modelValue}}</div>`
    })
    const vm = app.mount("#root");
</script>

model带参写法如下 需要注意modelModifiers也得跟着改为参数名称+Modifiers

<div id="root"></div>

<script>
    const app = Vue.createApp({
        data(){
            return {count:'a'}
        },
        template:`
            <div>
                <count v-model:app.uppercase="count"></count>
            </div>
        `
    });  

    app.component("count",{
        props:{
            'app':String,
            // 不传递默认为空对象 传递则为true
            'appModifiers':{
                default:()=>({})
            }
        },
        mounted(){
            console.log(this.appModifiers)  
        },
        methods:{
            handleClick(){
                let newValue = this.app+'b'
                if(this.appModifiers.uppercase){
                    newValue=newValue.toUpperCase()
                }
                // console.log(this.modelModifiers);
                this.$emit("update:app",newValue)
            }
        },
        template:`<div @click="handleClick">{{app}}</div>`
    })
    const vm = app.mount("#root");
</script>

Vue3 作用域插槽

作用域插槽官方讲解

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。将子组件插槽prop传递给父组件使用方法如下

<div id="root"></div>

<script>
    const app = Vue.createApp({
        template:`
            <list v-slot="slotProps">
                <span>{{slotProps.item11}}</span>    
            </list>`
    })

    app.component("list",{
        data(){
            return {
                list:[1,2,3]
            }
        },
        template:`
            <div>
                <slot v-for="item in list" :item11="item">
                    {{item}}
                </slot>
            </div>
        `
    })
    const vm = app.mount("#root");
</script>

ES6结构写法如下 对象的解构赋值学习

<div id="root"></div>

<script>
    const app = Vue.createApp({
        //ES6 解构
        template:`
            <list v-slot="{item11}">
                <span>{{item11}}</span>    
            </list>`
    })

    app.component("list",{
        data(){
            return {
                list:[1,2,3]
            }
        },
        template:`
            <div>
                <slot v-for="item in list" :item11="item">
                    {{item}}
                </slot>
            </div>
        `
    })
    const vm = app.mount("#root");
</script>