vue组件详解（一）—

一、什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

二、组件用法

组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。

2.1 全局注册后，任何V ue 实例都可以使用。如：

        <div id="app1"><my-component></my-component></div>

Vue.component('my-component',{template: '<div>这里是组件的内容</div>'
});var app1 = new Vue({el: '#app1'
});

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜my-component></my- component> 的形式来使用组件了

template的DOM结构必须被一个元素包含，如果直接写成“这里是组件的内容”，不带“<div></ div ＞”是无法渲染的。（而且最外层只能有一个根的<div>标签）

2.2 在Vue 实例中，使用component选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。如：

        <div id="app2"><my-component1></my-component1></div>

var app2 = new Vue({el: '#app2',components:{'my-component1': {template: '<div>这里是局部注册组件的内容</div>'}}
});

2.3 data必须是函数

除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data 、computed 、methods等。但是在使用data时，和实例稍有区别， data 必须是函数，然后将数据return 出去。

        <div id="app3"><my-component3></my-component3></div>

Vue.component('my-component3',{template: '<div>{{message}}</div>',data: function(){return {message: '组件内容'}}
});
var app3 = new Vue({el: '#app3'
});

一般return的对象不要引用外部的对象，因为如果return 出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步。

所以一般给组件返回一个新的独立的data对象。

更多专业前端知识，请上【猿2048】www.mk2048.com

vue组件详解（一）——组件与复用相关推荐

vue.js实战第一篇第七章组件详解_组件通信
正向数据传递props <div id="app"><my-component message="来自父组件的数据"></my-c ...
【Vue组件详解（一）】
Vue组件详解(一) 简介对组件的理解传统方式编写页面组件方式编写页面非单文件组件完整代码总结简介组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,M ...
Android基础四大组件详解
Android四大组件详解博主接触Android开发将近一年,从最初的JavaSE开始,到Android基础,一直学的糊糊涂涂,最近想整理一番 android基础, 顺便把自己的学习开发经验分享给大 ...
Android笔记——四大组件详解与总结
android四大组件分别为activity.service.content provider.broadcast receiver. -------------------------------- ...
ReactNative ViewPageAndroid组件详解
源码传送门在我们开发Android的时候,ViewPage这个控件的使用频率还是很高的,最简单的就是制作引导页,应用程序的主界面等,在ReactNative开发中实现该功能的组件是ViewPageA ...
Android Lifecycle 生命周期组件详解
转载请标明出处:https://blog.csdn.net/zhaoyanjun6/article/details/99695779 本文出自[赵彦军的博客] 一.Lifecycle简介为什么要引进 ...
Cinder 组件详解 - 每天5分钟玩转 OpenStack（47）
Cinder 组件详解 - 每天5分钟玩转 OpenStack(47) 本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户, ...
Android应用开发—Intent组件详解
转载自:Android中Intent组件详解 Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件. Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的 ...
ue4移动到一定距离_UE4移动组件详解（一）——移动框架与实现原理
原文链接(转载请标明):UE4移动组件详解(一)--移动框架与实现原理_Jerish的博客-CSDN博客blog.csdn.net 前言关于UE4的移动组件,我写了一篇非常详细的分析文档.由于篇幅 ...
SpringCloud分布式开发五大组件详解
SpringCloud分布式开发五大组件详解 https://blog.csdn.net/weixin_40910372/article/details/89466955 服务发现--Netflix ...

vue组件详解（一）——组件与复用

vue组件详解（一）——组件与复用相关推荐

最新文章

热门文章