Vue组件内定义子组件

最新推荐文章于 2023-09-05 23:26:29 发布

丶久友

最新推荐文章于 2023-09-05 23:26:29 发布

阅读量1.5k

点赞数

分类专栏： Vue从零到一

本文链接：https://blog.csdn.net/weixin_44614772/article/details/104714320

版权

Vue从零到一专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>我是子组件</h2>
            <p>我是内容哈哈哈</p>
        </div>
    </template>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'你好啊！',
                isShow:true
            },
            components:{
                cpn:{
                    template:"#cpn",
                    data(){
                        return {
                            isShow:false
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

另一种写法：
html只需要一个div的id等于app直接挂载替换

// 使用vue进行开发
import Vue from 'vue'
const App = {
    template: `
    <div>
        <h2>{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
    </div>
    `,
    data(){
        return {
            message:'hellow webpack',
            name:'coderwhy'
        }
    },
    methods:{
        btnClick(){
            alert('弹出！')
        }
    }
}
new Vue({
    el: "#app",
    template:'<App/>',
    components:{
        App
    }
})

然后就可以直接把这个app对象抽离成另一个js文件，通过import导入
这样就更像现在的vue组件化开发了

丶久友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue组件内定义子组件

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
复制链接

扫一扫