vue 知识点整理——组件(components)
定义Vue组件
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
组件化和模块化的不同:
- 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;
- 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
全局注册: 全局组件定义的三种方式(注册全局组件,在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中)
- 使用 Vue.extend 配合 Vue.component 方法:
var login = Vue.extend({template: '<h1>登录</h1>'});Vue.component('login', login);
- 直接使用 Vue.component 方法:
Vue.component('register', {template: '<h1>注册</h1>'});
- 将模板字符串,定义到script标签种:
<script id="tmpl" type="x-template"><div><a href="#">登录</a> | <a href="#">注册</a></div></script>
同时,需要使用 Vue.component 来定义组件:
Vue.component('account', {template: '#tmpl'});
注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
### 组件名大小写:
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>
。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name>
和 <MyComponentName>
都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
组件的data必须是函数:
Vue.component('account', {template: '#tmpl',data() {return {msg: '大家好!'}},methods:{login(){alert('点击了登录按钮');}}});
【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象
局部注册: 使用components
属性定义局部子组件
- 组件实例定义方式:
<script>// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {},components: { // 定义子组件account: { // account 组件template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件components: { // 定义子组件的子组件login: { // login 组件template: "<h3>这是登录组件</h3>"}}}}});</script>
- 引用组件:
<div id="app"><account></account></div>
import ComponentA from './ComponentA.vue'export default {components: {ComponentA},// ...}注意在 ES2015+ 中,在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写,即这个变量名同时是:用在模板中的自定义元素的名称
包含了这个组件选项的变量名
单文件组件 .vue 文件:
整个vue项目就只有一个new Vue()根实例
每个.vue文件 都有自己的组件内部的vue实例 他们都是根实例的子组件
main.js的是vue根实例,其下的组件是它的子实例,实例嵌套实例,父子关系
// test.vue<template><p class="text">{{text}}</p>
</template><script type="text/ecmascript-6">export default {props: { // 父组件转入的值text: {type: String,default: '' // 默认是空}},data() {return {}}}
</script><style scoped lang="less"></style>
组件相互间的传值:
参考文档
vue 知识点整理——组件(components)相关推荐
- Vue知识点整理(待更新)
Vue知识点整理(待更新) 参考Vue.js中文官网,Vue 知识点汇总(上)–附案例代码及项目地址,Vue 知识点汇总(下)–附案例代码及项目地址,Vue知识点汇总[持更] 文章目录 Vue知识点整 ...
- vue基础整理-组件
1--组件 可以理解为页面的一部分,其具有独立的逻辑及功能或界面,同时又能与其他部分进行相应地融合,变成完整的应用.页面可以由这样一个个的组件构成,如导航栏.列表项.弹窗.侧边栏.下拉框.多选框等.页 ...
- Vue知识点整理(三)- Vue脚手架(1)- 初始化Vue脚手架、简单分析Vue脚手架结构
目录 一.初始化Vue脚手架 二.简单分析脚手架结构 一.初始化Vue脚手架 第一步(仅执行一次):全局安装 @vue/cli 在 命令提示符内输入(命令提示符 可由 win+R 调出 运行 界面,输 ...
- 【VUE】Vue知识点整理
vue 基本概念 作者: 尤雨溪 渐进式 的 自底向上增量开发的 mvvm框架 渐进式 可以和多种框架进行合并 vue是一个渐进式的框架(vue只会按照程序员的需要来进行功能的实现 不会影响到项目中没 ...
- vue中定义组件 components(局部 / 全局)
1. 基本信息 组件是对你 html 标签的一个拓展 组件里面的内容就是你模板的内容 组件分为全局组件和局部组件 对象当中定义的组件都是局部组件 2. 如何定义(注册)组件 定义组件需要使用compo ...
- Vue知识点整理(一)基础知识
1.Vue插值语法 使用{{data}}表示动态数据 ,{{}}是写javaScript的地方 2.使用v-html,{{}}不支持带有标签的数据,来让数据变成html 主要是为了防止XSS,csrf ...
- [Vue.js] 深入 -- 组件化开发
组件化开发思想 现实中的组件化思想体现 标准 分治 重用 组合 组件注册 全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
- Vue 开发 UI 组件库
Vue 开发 UI 组件库 前言 一.开发环境搭建 1.项目初始化 2.开发前准备 二.Vue 实现常用组件 1.button 组件 1.1 参数支持 1.2 事件支持 1.3 Button 组件 1 ...
- 易忘知识点整理(持续更新)——VUE使用
1. 复习组件中自定义v-model指令使用: 组件中v-model最基本的用法:在父组件给子组件绑定v-model的时候,相当于绑定了自定义事件@input,v-model=后面传递的值,是子组件在 ...
最新文章
- Django开启HTTPS
- [ASP.NET MVC3.0]Contact Manager 之迭代开发 一
- 【问题收集·中级】关于XMPP使用Base传送图片
- 炸了!刚刚数学家获得了2020年诺贝尔物理学奖!没想到诺奖也能蝉联.......
- 如何在Ubuntu 16.04中创建GIF动图
- 变速恒频风电机组的优缺点_保障风电齿轮箱的有效润滑
- css如何将元素水平居中
- 奇怪的DNS问题,虚拟机下可以,真实的环境却出错,希望大家帮助下
- C#.NET验证码智能识别学习笔记---06 解决java jre问题:JTessBoxEditor.jar打开的时报找不到或无法加载主类 com.sun.tools.javac.Main错误
- Java关键字break、return、continue
- win32汇编-窗口 对话框 (三)
- maven项目转eclipse工程的命令:eclipse.bat
- 从零实现深度学习框架——前馈网络语言模型
- linux jnlp显示异常,Web启动异常 JNLP
- 用uniapp组件写登录注册
- 热成像进入AI人工智能时代!精准人脸识别体温计,实名制测量体温
- 观察者模式(java)浅析
- windows7 VCP安装失败的解决办法
- 【转】编写高质量代码改善C#程序的157个建议——建议64:为循环增加Tester-Doer模式而不是将try-catch置于循环内...
- 其疾如风,其徐如林。侵掠如火,不动如山。难知如阴,动如雷震。。是什么意思,出处在哪?...