Vue3中组件定义写法

最新推荐文章于 2024-08-20 23:10:52 发布

陌依依

最新推荐文章于 2024-08-20 23:10:52 发布

阅读量662

点赞数

分类专栏： web前端开发文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/a1598452168YY/article/details/128074973

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

vue3中不支持：Vue.component

所以在vue3中是这样定义组件的：

<body>
    <div id="box">
        <navbar myname="yiyi"></navbar>
        <sidebar></sidebar>
    </div>
    
    <script>
        var obj={
            data(){
                return{
                    
                }
            },
            methods:{

            }
        }
        var app = Vue.createApp(obj)
        //定义子组件
        app.component("navbar",{
            props:["myname"],
            template:`
            <div>
                navbar--{{myname}}
            </div>`
        })
        app.component("sidebar",{
            template:`
            <div> sidebar </div>`
        })
        app.mount("#box")

    </script>
</body>

其他的跟vue2写法一样，比如插槽技术、父传子属性、子传父事件等等；

大胆放心写，不过有生命周期的两个销毁函数改变了，看

由原来vue2的：beforeDestroy、destroyed

变成了Vue3的：beforeUnmount、unmount