父子组件

<body>
    <div id="app">
        <parent></parent>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('parent',{
            template:`
                <div>
                    <h2>我是父组件</h2>
                    <p>我是父组件</p>
                    <child></child>
                <div>
            `,
            components:{
                child:{
                    template:`
                        <div>
                            <h2>我是子组件</h2>
                            <p>我是子组件</p>
                        <div>
                    `
                }
            }
        });

        new Vue({
            el:'#app',
            data:{
                message:'hello world'

            }
        })
    </script>
</body>

 

 

posted @ 2022-02-21 21:04  Mr_sven  阅读(13)  评论(0编辑  收藏  举报