vue组件基础用法详解

概述

在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例

组件是一个自定义元素或称为一个模块,包括所需的模板、逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通过Vue.js的声明式渲染后,占位符将会被替换为实际的内容

下面是一个最简单的模块示例

<div id="app">
    <xiaohuochai></xiaohuochai>
 </div>

1.jpg

注册组件

组件注册包括全局注册和局部注册两种

【全局注册】

要注册一个全局组件,可以使用 Vue.component(tagName, options)

Vue.component('my-component', {
  // 选项
  })

组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用

[注意]要确保在初始化根实例之前注册了组件

<div id="example">
  <my-component></my-component>
  </div>
<script>
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

2.jpg

【局部注册】

通过使用组件实例选项components注册,可以使组件仅在另一个实例/组件的作用域中可用

<div id="example">
  <my-component></my-component>
</div>
<script>
// 注册
var Child = {
  template: '<div>A custom component!</div>'
};
// 创建根实例
new Vue({
  el: '#example',
    components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }  
})
</script>

3.jpg

组件树

使用组件实例选项components注册,可以实现组件树的效果

<div id="example">
  <my-component></my-component>
</div>
<script>
// 注册
var headerTitle = {
    template: '<p>我是标题</p>',
};
var headerContent = {
    template: '<p>我是内容</p>',
};
var header = {
  template: `
      <div class="hd">
            <header-content></header-content>
            <header-title></header-title>
      </div>
  `,
    components: {
    'header-content': headerContent,
    'header-title': headerTitle
  }   
};
// 创建实例
new Vue({
  el: '#example',
    components: {
    'my-component': header
  }  
})
</script>

4.jpg

对于大型应用来说,有必要将整个应用程序划分为组件,以使开发可管理。一般地组件应用模板如下所示

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

【v-once】

尽管在 Vue 中渲染 HTML 很快,不过当组件中包含大量静态内容时,可以考虑使用 v-once 将渲染结果缓存起来

Vue.component('my-component', {
  template: '<div v-once>hello world!...</div>'
})

模板分离

在组件注册中,使用template选项中拼接HTML元素比较麻烦,这也导致了HTML和JS的高耦合性。庆幸的是,Vue.js提供了两种方式将定义在JS中的HTML模板分离出来

【script】

在script标签里使用 text/x-template 类型,并且指定一个 id

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
  template: '#hello-world-template'
})

上面的代码等价于

Vue.component('hello-world', {
  template: '<p>Hello hello hello</p>'
})

下面是一个简单示例

<div id="example">
  <my-component></my-component>
</div>
<script type="text/x-template" id="hello-world-template">
  <div>hello world!</div>  
</script>
<script>
Vue.component('my-component', {
  template: '#hello-world-template'
})
new Vue({
  el: '#example'
})
</script>

5.jpg

【template】

如果使用<template>标签,则不需要指定type属性

<div id="example">
  <my-component></my-component>
</div>
<template id="hello-world-template">
  <div>hello world!</div>  
</template>
<script>
// 注册
Vue.component('my-component', {
  template: '#hello-world-template'
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

6.JPG

命名约定

对于组件的命名,W3C规范是字母小写且包含一个中划线(-),虽然Vue没有强制要求,但最好遵循规范 

<!-- 在HTML模版中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

当注册组件时,使用中划线、小驼峰、大驼峰这三种任意一种都可以

// 在组件定义中
components: {
  // 使用 中划线 形式注册
  'kebab-cased-component': { /* ... */ },
  // 使用 小驼峰 形式注册
  'camelCasedComponent': { /* ... */ },
  // 使用 大驼峰 形式注册
  'PascalCasedComponent': { /* ... */ }
}

嵌套限制

并不是所有的元素都可以嵌套模板,因为要受到HTML元素嵌套规则的限制,尤其像<ul>,<ol>,<table>,<select> 限制了能被它包裹的元素,而一些像 <option> 这样的元素只能出现在某些其它元素内部

在自定义组件中使用这些受限制的元素时会导致一些问题,例如

<table id="example">
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被认为是无效的内容,因此在渲染的时候会导致错误

<script>
// 注册
var header = {
  template: '<div class="hd">我是标题</div>'  
};
// 创建实例
new Vue({
  el: '#example',
    components: {
    'my-row': header
  }  
})
</script>

7.jpg

【is属性】

变通的方案是使用特殊的 is 属性

<table id="example">
  <tr is="my-row"></tr>
</table>
<script>
// 注册
var header = {
  template: '<div class="hd">我是标题</div>'
};
// 创建实例
new Vue({
  el: '#example',
    components: {
    'my-row': header
  }  
})
</script>

8.jpg

根元素

Vue强制要求每一个Vue实例(组件本质上就是一个Vue实例)需要有一个根元素

如下所示,则会报错

<div id="example">
  <my-component></my-component>
</div>
<script>
// 注册
Vue.component('my-component', {
  template: `
    <p>第一段</p>
    <p>第二段</p>
  `,
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

9.jpg

需要改写成如下所示

<script>
// 注册
Vue.component('my-component', {
  template: `
    <div>
      <p>第一段</p>
      <p>第二段</p>
    </div>  
  `,
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

10.jpg

data数据

一般地,我们在Vue实例对象或Vue组件对象中,我们通过data来传递数据

<div id="example">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>
<script>
// 注册
Vue.component('my-component', {
  template: '<div>{{message}}</div>',
  data:{
      message: 'hello'
  }
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

运行上面的代码,会使Vue停止执行,并在控制台发出错误提示,告诉你在组件中 data 必须是一个函数

11.jpg

可以用如下方式来绕开Vue的错误提示

<script>
// 注册
var data = {counter: 0}
Vue.component('my-component', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  data:function(){
      return data;
  }
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

12.jpg

由于这三个组件共享了同一个 data,因此增加一个 counter 会影响所有组件

当一个组件被定义, data 需要声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象。

通过提供 data 函数,每次创建一个新实例后,能够调用 data 函数,从而返回初始数据的一个全新副本数据对象

因此,可以通过为每个组件返回全新的 data 对象来解决这个问题:

<script>
// 注册
Vue.component('my-component', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  data:function(){
      return {counter: 0};
  }
})
// 创建根实例
new Vue({
  el: '#example'
})
</script>

现在每个 counter 都有它自己内部的状态了

原生事件

有时候,可能想在某个组件的根元素上监听一个原生事件。直接使用v-bind指令是不生效的

<div id="example">
  <my-component @click="doTheThing"></my-component>
  <p>{{message}}</p>
</div>
<script>
Vue.component('my-component', {
  template: '<button>按钮</button>',
})
new Vue({
  el: '#example',
  data:{
    message:0
  },
  methods:{
    doTheThing(){
      this.message++;
    }
  }
})
</script>

13.jpg

可以使用 .native 修饰 v-on指令即可

<div id="example">
  <my-component @click.native="doTheThing"></my-component>
  <p>{{message}}</p></div>
<script>
Vue.component('my-component', {
  template: '<button>按钮</button>',
})
new Vue({
  el: '#example',
  data:{
    message:0
  },
  methods:{
    doTheThing(){
      this.message++;
    }
  }
})
</script>
Image placeholder
前端答疑
未设置
  55人点赞

没有讨论,发表一下自己的看法吧

推荐文章
layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

vue中的diff算法详解

1.当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的

app.vue组件如何按需加载?

app.vue组件如何按需加载?按需加载组件,或者异步组件,主要是应用了component的is属性1、template中的代码:这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名

开源React Native组件库beeshell 2.0发布

2018年,我们开源了ReactNative组件库——beeshell1.0。时隔一年,我们对ReactNative组件库继续优化,实现beeshell2.0升级,开源38个功能。希望更好的服务社区,

YC中国创始人陆奇:人工智能时代,芯片和底层软件基本都要重做

大数据文摘出品作者:陆奇编辑:周素云2019年5月18日,在YC中国举办的YC中国创业者见面会上,YC中国创始人及首席执行官,YC全球研究院院长陆奇进行了以“技术驱动创新带来的创业机遇”为主题的精彩分

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

vue路由使用图文详解

传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例

vue插槽详解

一、插槽内容一句话:插槽内可以是任意内容。先看一下下面的代码:声明一个child-component组件,如果现在我想在内放置一些内容,结果会是怎样? Vue.component('child

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

.vue文件怎么使用组件?

.vue文件怎么使用组件?在vue中组件以.vue结尾,一个.vue文件就是一个组件。下面介绍下在组件中使用其他组件的方法。(相关课程推荐:Vue.js教程)1、首先创建一个组件MyTest.vue

使用vue实现一个电子签名组件

使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在

使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canva

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

有vue基础学react难吗?

React是一个用于前端开发的开源JavaScript库,由Facebook开发。其基于组件的库使您可以为Web应用程序构建高质量的用户界面。vue.js是一个构建用户界面的渐进式框架。采用自底向上增

IDC发布:4Q18云IT基础设施收入低于传统IT基础设施收入

根据IDC全球云IT基础设施季度跟踪报告,在2018年第四季度(4Q18),包括公有和私有云在内的云IT基础设施产品(服务器、企业存储和以太网交换机)销售收入同比增长28.0%,达到168亿美元。20

python *args 的用法

*args的用法 *args和**kwargs主要用于函数定义。你可以将不定数量的参数传递给一个函数。 这里的不定的意思是:预先并不知道,函数使用者会传递多少个参数给你,所以在这个场景下使用这两个关键

python **kwargs 的用法

**kwargs的用法 **kwargs允许你将不定长度的键值对,作为参数传递给一个函数。如果你想要在一个函数里处理带名字的参数,你应该使用**kwargs。 这里有个让你上手的例子: defgree

Laravel 条件数组 in 的用法

需要将使用in查询的字段写成闭包的形式 $where['status']=1; $ids=[1,2]; $where[]=[function($query)use($ids){ $query->whe