零基础学习Vue: 第18课 Vue定义子组件template的3种写法

最新推荐文章于 2024-05-05 16:31:27 发布

舜岳

最新推荐文章于 2024-05-05 16:31:27 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41614928/article/details/89427965

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

零基础学习Vue: 第18课 Vue定义子组件template的常见3种写法：

第一种写法：

 template:`<div><p>我是子组件3</p></div>`

第二种写法：

<template id="one1">
    <div>
        <p>我是子组件1</p>
    </div>
</template>

第三种写法：

<script type="text/x-template" id="two1">
    <div>
        <p>我是子组件2</p>
    </div>
</script>

那么子组件该怎么实现呢，我们定义3个不同的子组件来演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 4.引用子组件 -->
    <one></one>
    <two></two>
    <three></three>
</div>

<!--3.子组件写法1 子组件one -->
<template id="one1">
    <div>
        <p>我是子组件1</p>
    </div>
</template>

<!--3.子组件写法2 子组件two -->
<script type="text/x-template" id="two1">
    <div>
        <p>我是子组件2</p>
    </div>
</script>



<script>
    //1.定义子组件one
    let one = {
        template:'#one1'
    }
    //1.定义子组件two
    let two = {
        template:'#two1'
    }
    //1.定义子组件 three
    let three = {
        template:`<div><p>我是子组件3</p></div>`,   //3.子组件写法3 子组件three
    }

    let vm = new Vue({
        el:'#app',  //这是根组件
        components:{	//2.注册组件
            one,
            two,
            three
        }
    })
</script>
</body>
</html>