没有搭建脚手架时vue组件的使用

全局组件

//全局组件 第一种声名方式
var s = Vue.extend({
template: "<h6>全局组件 第一种声名方式</h6>"
})
Vue.component("hello", s);
//前台标签调用 <hello></hello>
//全局组件 第二种声明方式
Vue.component("k", {
template: "<h6>全局组件 第二种声明方式</h6>"
});
//前台标签调用 <k></k>

局部组件

components: {
//局部组件，声明方式1
    zujian1: {
        template: "<h6>局部组件，声明方式</h6>" //因为声明的是字符串直接调用 <zujian1></zujian1>
    },
//局部组件，声明方式2
    zujian2: {
        template: "#zujian2",
            data() {
                return {
                    msg: "组件2的值"
                    }
                }            
            },
}
//第二种调用方式
//因为声明的不是字符串所以不能直接使用 需要通过标签<template id="zujian2"></template> 标签之间必须要用html标签
如<template id="zujian2"><div>{{msg}}</div></template> 不能没有html标签就直接调用

<head>
    <template id="zujian2">  //此处要加上组件的id
        <p>{{msg}}</p>
     </template>
<body>
    <!--页面容器-->
    <div id="my" class="container" v-cloak>
        <div class="container">
            <hello></hello>
            <k></k>
            <zujian1></zujian1>
            <zujian2></zujian2> /*为空的时候不能使用，必须要用到模板*/
        </div>
    </div>
</body>
</head>

没有搭建脚手架时vue组件的使用

猜你喜欢