小知识点:
1.template:覆盖原dom;需要有一个根元素,把所有元素包裹在一个元素里面

2.el如果匹配了多个dom节点,只会对第一个匹配的节点有效

正文:
1.组件是可复用的 Vue 实例,也有data、methods、computed、watch等选项,但没有像el这样的根实例特有的选项;

2.其中的data必须是函数,将写在new创建的实例的data选项,以return的方式传递给该组件创建的实例;因为每用一次组件,都会创建出新的实例;
每次使用该组件,都独立维护一份data数据,不能因某一个实例修改data而影响其他实例维护的data

3.每个组件必须有且只有一个根元素,如用一个div包裹这些子元素

全局注册:
1.全局注册要写在创建Vue实例对象前

2.全局注册的组件可在任意Vue根实例里使用

3.可以在vue实例绑定的dom节点下,直接写成自定义标签:

<my-component></my-component>

4.可以在创建另一个Vue实例时,写在其template里(这样做依然会覆盖该Vue实例下el绑定的dom元素),就可以渲染出定义的组件

5.举例:

#app, #app2 {
    border: 1px solid black;
}
#app3 {
    color:red;
}
<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<div id="app2">
    <my-component></my-component>
</div>
<div id="app3">
    <div id="app4"></div>
</div>
Vue.component("my-component",{
    template:"<div @click='count++'>{{count}}</div>",
    data: function(){
        return {count:0}
    }
})
let vm1 = new Vue({
    el:"#app"
})
let vm2 = new Vue({
    el:"#app2"
})
let vm3 = new Vue({
    el:"#app4",
    template:"<my-component></my-component>"
})

在这里插入图片描述

在这里插入图片描述

局部注册:
哪个Vue实例注册了这个组件,只能这个实例的el匹配的元素范围内使用这个组件

<div id="app2">
    <ccy-component></ccy-component> <!--局部-->
    <my-component></my-component> <!--全局-->
</div>
new Vue({
        el:"#app2",
        components:{
            "ccy-component":{
                "template":"<div>321</div>"
            }
        }
    })

在这里插入图片描述
命名:
1.一般组件名命名为:你的名字 - 组件名,防止和别人的组件/原生组件串名
2.在局部组件中,组件名可以写成首字母大写式CcyComponent(驼峰式也可以),但在html中写成标签时只能用横杆ccy-component,否则模板不生效

举例:
vue实例中注册时可以用首字母大写式:

let vm2 = new Vue({
    el:"#app2",
    components:{
        "CcyComponent":{
            "template":"<div>321</div>"
        }
    }
})

html标签名要写成横杆连接式,否则模板不生效:

<div id="app2">
    <ccy-component></ccy-component>
    <my-component></my-component>
</div>

html标签名用首字母大写式:

<div id="app2">
    <CcyComponent></CcyComponent>
</div>

不能渲染出div标签,以及内容321
在这里插入图片描述

全局注册和局部注册的小demo:

<div id="app">
    <ccy-input></ccy-input>
    <ccy-movies></ccy-movies>
</div>
// 全局组件
Vue.component("ccy-movies", {
    template: "<ul><li v-for='movie in moviesList'>{{movie.name}}</li></ul>", 
    data: function () {
        return {
            moviesList: [
                { name: "刺杀小说家" },
                { name: "你好李焕英" },
                { name: "哪吒重生" }
            ]
        }
    }
})
new Vue({
    el: "#app",
    components: {
        "ccy-input": {
            template: "<div><input type='text' v-model:value='num'><div>{{num}}</div></div>", // input输入框与num双向绑定
            data: function () {
                return { num: 123 }
            }
        } // 局部组件
    }
})

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐