Vue中组件注册的3种方式 (六)

系列文章目录

---

一、第一组件注册的种方式(全局组件的创建)

DOM结构如下:

  <div id="app">
        <!-- 全局注册组件,可以在其他组件中使用 -->
        <!-- 使用创建的全局组件标签 -->
        <index-Box></index-Box>
        <!-- 局部注册组件,只能在该组件中使用 -->
    </div>

JS中的代码如下

<script>
    //1组件名字,参数2组件的配置属性
    var indexbox = Vue.component('IndexBox', {
       //组件模板
        template: `<div>
            <span>我是一个全局组件 {{age}}</span>
            </div>`,
        data() {
            return {
                age: 10,
            }
        },
       
    })

    var app = new Vue({
        el: "#app",
        data: {},
    })
</script>

二、第二种组件注册的方式(局部组件的创建)

DOM结构如下:

 <div id="app">
        <!-- 全局注册组件,可以在其他组件中使用 -->
         <!-- 局部注册组件,只能在该组件中使用 -->
        <com1></com1>    
    </div>

js代码如下

 var app = new Vue({
        el: "#app",
        data: {},
        //本组件需要使用的组件,或者是定义一些局部的组件
        components: {
        //局部组件的创建 com1
            com1: {
                template: `<div>是打发发发付</div>`
            }
        }

    })

三、第三种组件的创建方式

组件模板的创建

<div id="app">
        <Com></Com>
        <input-box></input-box>
 </div>

script标签创建模板
*-
*-
这里的id与组件中的template '“#s1” "#s2"相对应

<script type="text/html" id="s1">
    <div>
        <p>{{age}}</p>
    </div>
</script>
<script type="text/html" id="s2">
    <div>
        <p>asda4d564654</p>
    </div>
</script>

js代码

 // 在组件中使用 template: 后面直接跟模板字符串
    //在组件里面使用template: 后面跟的是script的id,需要设置script的type字段=text/html
    Vue.component("InputBox", {
        template: `#s1`,
        data() {
            return {
                age: 18
            }
        },
    })

    var app = new Vue({
        el: "#app",
        components: {
        //局部引用组件
            com: {
                template: `#s2`
            }
        }
    })