vue components组件

最新推荐文章于 2024-02-08 10:28:07 发布

前端小吕

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量3.2k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_49230250/article/details/108130147

版权

组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。

1.局部注册

new Vue({
	el...
	components:{
		组件名称:{
			template:"组件的模板内容"
		}
	}
})

使用：

在挂载点内以<组件名>这样的方式来使用组件，在挂载点内组件名称的地方，vue解析之后就会把组件的template模板中的内容展示出来。

2.全局注册

局部注册的组件仅能在当前实例的挂载点内使用，如果需要在多个vue实例中使用同一个组件，就需要使用全局注册的方式来注册这个组件。

语法：

Vue.component('组件名',{template:"模板内容"})
new Vue({})
new Vue({})
...

3.注意事项

(1)Do not use built-in or reserved HTML elements as component id: div

不能使用系统内置的标签名作为组件名

组件名称使用系统内置的名字全大写也不行，浏览器会把大写字母解析成小写

(2)Unknown custom element: - did you register the component correctly?

组件未正确的注册就使用了

如果组件名称中确实包含大写字母，在使用组件时，要把大写字母换成-小写字母

(3)Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

组件的template中只能有一个根标签。

4.template的使用

vue中提供了一个template标签，它和其中的内容不会被浏览器直接解析出来。

因为组件的template属性使用字符串方式进行编写，没有语法提示，编写起来不方便且不容易维护，所以我们可以把template属性和template标签结合起来使用。

<div id="app">
        <one></one>
        <two></two>
    </div>
    <template id="one">
        <div>
            <h2>这是one组件的内容</h2>
            <p>这是一个段落</p>
        </div>
    </template>
    <template id="two">
        <div>
            <h3>这是two组件</h3>
        </div>
    </template>
    <script>
        new Vue({
            el:"#app",
            components:{
                one:{
                    // 告知当前组件的template属性使用哪个template标签中的内容作为模板内容
                    template:"#one"
                },
                two:{
                    template:"#two"
                }
            }
        })
    </script>

5.组件中的data要是一个函数

受数据类型的影响，对象类型数据复用时，会影响数据的变化，在组件中定义data时，不能使用对象类型，要使用函数，在函数中返回一个新的对象，这样在复用组件时，每使用一次就会返回一个新的对象空间来存储数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template的使用</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 直接使用vue根实例上的数据 -->
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
        <hr>
        <!-- 复用组件 -->
        <v-count></v-count>
        <v-count></v-count>
        <v-count></v-count>
    </div>
    <template id="count">
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
    </template>
    <script>
        var vCount = {
            template:"#count",
            data(){
                return{ num:100 }
            }
        }
        new Vue({
            el:"#app",
            components:{ vCount},
            data:{ num:100 }
        })
    </script>
</body>
</html>

前端小吕

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue components组件

组件组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。1.局部注册new Vue({ el... components:{ 组件名称:{ template:"组件的模板内容" } }})使用：在挂载点内以<组件名>这样的方式来使用组件，在挂载点内组件名称的地方，vue解析之后就会把组件的template模板中的内容展示出来。2.全局注册局部注册的组件仅能在当前实例的挂载
复制链接

扫一扫