vue中的组件 (全局注册和本地注册组件)

Vue的一大特征就是组件化。也就是可以将vue对象作为一个组件反复利用。
而想要实现组件化，需要在页面中注册组件：组件注册方法分为全局注册和本地注册。

1. 全局注册组件

Vue.component(“组件名”,{vue 对象})

组件使用的前提是在被绑定了的html元素中才能使用。如果一个div没有被vue绑定，那么div中不能使用之前注册的组件。

<body><div id="app"><model1></model1></div></body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>Vue.component("model1",{template: "<div>{{message}}<button type='button' @click='btnFn()'>点我</button></div>",data:function(){return {message:"hello vue!"}},methods:{btnFn:function(){alert("向前走，就这么走~~~");}}})new Vue({el: "#app"})</script>

2. 本地注册组件

vue的全局注册只要在被绑定了的div中就能使用，但如果是本地注册的组件，在其他被vue绑定的div中则不能使用该组件。

<body><div id="app"><!-- 可以显示 --><model></model></div><div id="app1"><!-- 无法显示 --><model></model></div></body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>// 定义一个组件var model = {template: "<div><h1>{{message}}</h1><button type='button' @click='change()'>点我</button></div>",data: function () {return {message: "hello Vue!!!"};},methods: {change: function () {alert("hello vue！！！");}},computed: {}}new Vue({el: "#app",components: {"model": model  //通过components实例属性注册到id = app的vue对象中}})new Vue({el: "#app1"})</script>

`作为组件的vue对象的注意事项

组件对象中的data实例属性和不是组件中的data实例属性写法是不相同的。

// 不是组件data的写法
data: {属性名1: 值,属性名2: 值....
}// 组件中的data的写法
data:function(){return {属性名1: 值,属性名2: 值...}
}

template是展现内容的一个键。值是一个字符串。需要注意的是template中必须有且只能有一个根元素，否则无法显示同级下的后面的html元素。
错误写法：

template: "<div>{{message}}{{age}}<button type='button' @click='btnFn()'>点我</button></div> <h1>hhhhh</h1>"

正确写法：

template: "<div><div>{{message}}{{age}}<button type='button' @click='btnFn()'>点我</button></div> <h1>hhhhh</h1></div>"

vue中的组件 (全局注册和本地注册组件)相关推荐

Vue中两个让你幸福感爆棚的组件导入小技巧之require.context
前言小伙伴们大家好,在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V(独家总结)中我们已经学习了一个注册全局组件的小技巧,使得我们在注册大量全局组件时不再被Vue.u ...
vue中下载文件导出保存到本地
vue中下载文件导出保存到本地先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地看看返回数据 res.config.url 中是下载链接地 ...
Element组件引发的Vue中mixins使用，写出高复用组件
我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念.每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子.所以你会发 ...
【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）
这节也是这个系列最后的一篇文章了. 第二篇文章,将Echarts封装成了组件,在使用的时候,只需将ChartsOption传递进去即可,同时,提供了监听事件,当Option发生变化时,会刷新图表. 因 ...
vue中什么叫全局状态?
前言: 在 Vue 中,全局状态指的是所有组件都可以访问和修改的共享数据状态.具体来说,它通常是通过 Vuex 这个官方状态管理库实现的. 详细解释: 1.使用全局状态有以下几个优点: 可以方便地共享 ...
Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）
前言小伙伴们大家好,今天要跟大家分享的是能够提升幸福感的关于组件导入的两个小技巧.做前端开发的小伙伴都知道,当前前端中有两大流行的框架Vue和React.而现在的前端开发中大部分公司用的也都是这两大 ...
Vue中怎样封装与使用公共状态属性组件实现类似枚举类的效果
场景如果一个状态量在多个地方用到,或者一个业务用到多个状态量. 可以使用类似枚举类代替直接使用明文表示. 这样如果需要修改状态量的值就不用再每个地方都要修改. Vue中要实现同样的效果,比如自定义一 ...
vue中mixin 感觉很牛逼（父子组件融合成一个新组件）
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
vue 中引入阿里图标库，封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...

vue中的组件 (全局注册和本地注册组件)

vue中的组件 (全局注册和本地注册组件)相关推荐

最新文章

热门文章