Vue_局部组件5种定义方法

局部组件：需要在实例化对象中通过components属性进行注册。

以下均需引入：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第1种方法：

定义模板（script标签 - text / template）：

• 1、直接写在组件里面的 template 属性中。
• 2、写在 script 标签中，然后在 组件中引用* 这个模板，
• script 的类型为 text / template ，通过script标签的 id 引用到组件中。

实例：

<script type="text/template" id="tm">
    <div>我是写在script标签里面的模板</div>
</script>
<script type="text/javascript">
    var test2 = {
        template:"#tm"
    }
    var vm = new Vue({
        el:"#app",
        components:{//注册组件
            test2//定义模板
        }
    })
</script>

使用：

<div id="app">
    <test2></test2>
</div>

第2种方法：

相比 第1种方法 script 标签 text/template类型而言，其可以弹出提示功能，相当于改善版

html

<div id="app">
    <tm></tm>
</div>
<template id="tmp2">
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>

javascript

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//改善 script标签text/template 引进方法
Vue.component("tm",{//在html中渲染tm标签
    template:"#tmp2",
    data(){
        return {
            msg:"hello world !"
        }
    }
})
var vm = new Vue({
    el:"#app"
})
</script>

第3种方法：

直接定义
实例：

<script type="text/javascript">
    var test = {
        template:"<div>{{msg}}</div>",
        data:function(){
            return {
                msg:"我是局部组件"
            }
        }
    }
    var vm = new Vue({
        el:"#app",
        components:{//注册组件
            test//当键名等于键值的时候 test:test，可以缩写成一个
        }
    })
</script>

使用：

<div id="app">
    <test></test>
</div>

第4种方法：

间接定义

<script type="text/javascript">
    var tem = `<div>我是在组件外部定义的模板</div>`,
    var test5 = {
        template:tem
    }
    var vm = new Vue({
        el:"#app",
        components:{//注册组件
            test5
        }
    })
</script>

使用：

<div id="app">
    <test5></test5>
</div>

第5种方法：

外联inp.js文件

<script src="js/inp.js"></script>
//下面是inp.js：
function inp(){
    var obj = {
        props:["value"],//v-model 绑定数据默认是value
        template:`<div :style="inpBox">
            <input @input="$emit('input',$event.target.value)" :value="value" :style="inp"/>
        </div>`,
        //调用内建的 $emit(事件，) 方法 并传入事件名称来触发一个事件
        data:function(){
            return {
                inpBox:{
                    display:"inline-block",
                    border:"1px solid #666"
                },
                inp:{
                    border:"none",
                    outline:"none",
                    padding:"3px"
                }
            }
        }
    }
    return obj;
}

实例化vue

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        components:{//注册组件
            inp:inp(),//inp.js里面定义的函数
        },
        data:{
            message:"hello world"
        }
    })
</script>

html中使用：

<div id="app">
    <inp v-model="message"></inp>
    <p>{{message}}</p>
</div>