Vue 基础笔记 - 组件

最新推荐文章于 2022-10-31 20:46:33 发布
最新推荐文章于 2022-10-31 20:46:33 发布
阅读量238 收藏
点赞数
分类专栏： 前端 文章标签： vue javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39340061/article/details/107842107
版权

组件的使用主要内容包括：

  1. 组件定义
  2. 组件注册
  3. 组件组件间通信（传值）

目录

1. 基本示例

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<div id="components-demo">
	  <!-- 使用组件 -->
	  <button-counter></button-counter>
	</div>
	
	<script>
		// 定义新组件 ComponentA 
		var ComponentA = {
		  data: function () {
		    return {
		      count: 0
		    }
		  },
	    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
	  }
	 
	 //全局注册定义的组件，并将它取名为 button-counter
	 Vue.component('button-counter', ComponentA);
	   
	 new Vue({ el: '#components-demo' })
    </script>
})

2. 组件的定义

2.1 组件结构

完整的组件包括三个部分：

  • template（必须）
    template 部分主要是描述视图，可以使用 HTML 标签或自定义组件标签，CSS 等描述组件显示。
  • script（可选）
    与组件相关的 JS 脚本，一般包括 data，methods，props，watchs 等。
  • style（可选）
    可以将组件的显示样式定义统一定义在这个部分

2.2 使用 JavaScript 定义组件

	var ComponentA = {
		data: function () {
		    return {
		      count: 0
		    }
		  },
	    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    }

2.3 使用 Vue 文件定义组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<style scoped lang="stylus">
h1
  margin 40px 0 0
  color #42b983
</style>

3. 组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

3.1 全局注册

通过 Vue.component 全局注册

	Vue.component('my-component-name', {
	  // ... options ...
	})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

3.2 局部注册

在组件 ComponentB 中使用 ComponentA ， 在ComponentB 的 components 选项中注册想要使用的组件：

<template>
	...
	<ComponentA />
	...
</template>

<script>
	import ComponentA from "@/views/ComponentA";

	export default {
		components: {
		'ComponentA': ComponentA    // 组件名称：选项对象
		},
	// ...
	}
</script>

4. 通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

	<blog-post v-bind:title="title"></blog-post>
	
	Vue.component('blog-post', {
	  props: ['title'],
	  template: '<h3>{{ title }}</h3>'
	})
	new Vue({
		...
		data:{
			title: "hello"
		}
	})

2.3 定义 template

每个组件必须只有一个根元素, 你可以将模板的内容包裹在一个父元素内

	Vue.component('blog-post', {
	  props: ['post'],
	  template: `
	    <div class="blog-post">
	      <h3>{{ post.title }}</h3>
	      <div v-html="post.content"></div>
	    </div>
	  `
	})

3. 组件事件

3.1 基本使用

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<div id="components-demo" :style="{ fontSize: postFontSize + 'em' }">
		 <blog-post
			  v-for="post in posts"
			  v-bind:key="post.id"
			  v-bind:post="post"
			  v-on:enlarge-text="postFontSize += 0.1"
			></blog-post>
	</div>
	
	<script>
		
		Vue.component('blog-post', {
		  props: ['post'],
		  template: `
			<div class="blog-post">
			  <h3>{{ post.title }}</h3>
			  <button v-on:click="$emit('enlarge-text')">
				Enlarge text
			  </button>
			  <div v-html="post.content"></div>
			</div>
		  `
		})
	
	
		new Vue({ 
			el: '#components-demo',
			data: {
				posts: [
				  { id: 1, title: 'My journey with Vue' },
				  { id: 2, title: 'Blogging with Vue' },
				  { id: 3, title: 'Why Vue is so fun' }
				],
	
				postFontSize: 1
			}
		})
	</script>

简单说明：

  1. 组件定义 button 通过调用内建的 $emit 方法并传入事件名称来触发一个事件
  2. 组件使用时， 监听事件并使用 JS 代码修改 font size

3.2 使用事件抛出一个值

	<button v-on:click="$emit('enlarge-text', 0.1)">
	  Enlarge text
	</button>
	<blog-post v-on:enlarge-text="postFontSize += $event"></blog-post>


	# 或者使用处理函数
	<blog-post v-on:enlarge-text="onEnlargeText"></blog-post>
	methods: {
	  onEnlargeText: function (enlargeAmount) {
	    this.postFontSize += enlargeAmount
	  }
	}

4. 使用 v-model

4.1 v-model 直接使用

	<input v-model="searchText">

等价于

	<input
	  v-bind:value="searchText"
	  v-on:input="searchText = $event.target.value"
	>

4.2 v-model 用于组件

	<custom-input
	  v-bind:value="searchText"
	  v-on:input="searchText = $event"
	></custom-input>

为了让它正常工作，这个组件内的 必须：

  • 将其 value attribute 绑定到一个名叫 value 的 prop 上
  • 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>

5. 插槽

定义在组件模板中的 <slot></slot> 会在渲染时替换成自定义组件组件起始标签和结束标签之间的内容。

	<blog-post>会替换 slot 的内容</blog-post>
	Vue.component('blog-post', {
	  props: ['post'],
	  template: `
		<div class="blog-post">
		  <h3>{{ post.title }}</h3>
		  <button v-on:click="$emit('enlarge-text')">
			Enlarge text
		  </button>
		  <div v-html="post.content"></div>
		  <slot><slot>
		</div>
	  `
	})

5.1 编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。简单来说，在 slot 中无法访问实例的作用域。

5.2 后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

5.3 具名插槽

有时我们需要多个插槽, 元素有一个特殊的 attribute：name v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案

  • 具名插槽的缩写
    即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
	<template v-slot:header>
	    <h1>Here might be a page title</h1>
	 </template>

	#替换成

	 <template #header>
	    <h1>Here might be a page title</h1>
	 </template>

5.4 插槽 prop

允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。

	<cc v-for="p in posts" 
		:key="p.id"
		:todo="p">	
	</cc>

	Vue.component('cc', {
	  props: ['todo'],
	  template: `
		<p>
		 <slot v-bind:todo="todo">
		{{todo}}
		 </slot>
		</p>
	  `
	})

6. 保持控件状态

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

7. 异步组件

暂时看不懂， 待了解

8. 处理边界情况

8.1 访问元素 & 组件

8.1.1 访问根实例

对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。

// 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

8.1.2 访问父级组件实例

$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

8.1.3 访问子组件实例或子元素

你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用，可以通过this.$refs.xxx 来访问这个实例, 你应该避免在模板或计算属性中访问 $refs。

8.1.4 依赖注入

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<div id="components-demo" :style="{ fontSize: postFontSize + 'em' }">
		<cc v-for="p in posts" 
			:key="p.id"
			:todo="p">	
		</cc>
	</div>
	
	<script>
		
		Vue.component('cc', {
		  props: ['todo'],
		  
		  //我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 property
		  inject: ['getMap'],
		  template: `
			<p>
			<button @click="getMap">a button</button>
			 <slot v-bind:todo="todo">
			{{todo}}
			 </slot>
			</p>
		  `
		})
	
	
		var vue = new Vue({ 
			el: '#components-demo',
			data: {
				posts: [
				  { id: 1, title: 'My journey with Vue' },
				  { id: 2, title: 'Blogging with Vue' },
				  { id: 3, title: 'Why Vue is so fun' }
				],
	
				postFontSize: 1,
				name: 'abc'
			},
	
			methods:{
				getMap: function(){ console.log('a') }
			},
			
			// provide 选项允许我们指定我们想要提供给后代组件的数据/方法。	
			provide: function () {
				return {
					getMap: this.getMap
				}
			}
		})
	
	</script>

相比 $parent 来说，这个用法可以让我们在任意后代组件中访问 getMap，而不需要暴露整 实例。这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的，就和 props 一样。
负面影响

  • 它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。
  • 所提供的 property 是非响应式的
PAX-K
关注
专栏目录
Vue组件（学习笔记）
qq_43806604的博客
03-08 375
组件基础 Vue组件注册 入门 Vue 组件 代码复用和抽象的主要形式是组件 封装代码 组件当做小型的 单元实例对象 带有一个名称 (小巧 独立 可复用) 必须包含 一段 HTML标签的 代码块 (css样式 javascript代码) 显示页面 展示数据 修改数据 组件当做小型的 vm 实例对象 (组件系统 vue 核心) 全局注册 Vue.component("test", { template: "<div>组件test</di
Vue 官方笔记--组件
小菜的博客
07-24 2890
中文版(英文浓缩) 组件是什么？ 组件：具有预定义选项的实例 组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用 通过 prop ，我们可以实现父子组件之间的解耦，有了属性，子组件中就可以使用更为复杂的模板和逻辑，比如如下 <!-- 复制到 html 中可以直接运行哦，看看是什么结果吧 --> <div id="main"> <ol> <!-- 子组件 --> <todo-item v-for=
vue中slot插槽总结(干货)
qq_45378970的博客
10-05 681
vue之slot插槽讲解组件插槽匿名插槽具名插槽作用域插槽 组件插槽 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力 匿名插槽 <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box>
vue 之组件笔记
weixin_30393907的博客
12-20 76
一.组件的创建 需求 ：在shop.vue组件中使用shopList组件 1.创建shopList.vue组件 2.在shop.vue中导入shopList组件 import shopList from "./shopList.vue" 3.定义组件 export default { data () { return { m...
VUE组件笔记
NDSoumig的博客
05-11 193
全局定义组件 子组件与局部组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script sr
关于vue组件的一点笔记
weixin_43812512的博客
11-30 145
近期在学习vue的一些知识，总结了部分vue组件的一些笔记，特此记录，以便后期学习修正。 关于单文件组件，包含一下一些内容： 1、三个部分组成： 1）template模板（此部分为html结构，有且只有一个根标签） 2）script（用于处理逻辑，在部分导入组件 export default{}） 3）style（样式编辑，常加scoped，作用是表示样式只在当前组件内生效，防止多组件命名样式冲突...
vue-simple-calendar-sample:vue-simple-calendar的演示应用程序
05-11
这是用于开源vue-simple-calendar Vue组件（ ）的演示应用程序。 有关现场演示，请访问 。 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for ...
vue-testcase-minder-editor vue2.0思维导图实例
最新发布
04-28
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。在“vue-testcase-minder-editor vue2.0思维导图实例”中，我们主要探讨的是如何利用Vue 2.x版本结合特定的插件来创建一个交互式的...
vue-source-code:vue原始笔记-vue source code
03-24
Vue.js 内置了过渡系统，通过`transition`和`transition-group`组件以及`Vue.transition`对象，实现了元素和组件的进入/离开动画。 9. **路由（Vue Router）**： 虽然不是Vue.js本身的一部分，但Vue Router是官方...
Vue3学习笔记--Vue组件化基础 - 脚手架
专注于 前端开发 知识分享
09-27 190
当使用kebab-case(短横线分割命名)定义一个组件时 必须在引用这个自定义元素时 使用kebab-case,如:JavaScript})
Vue组件学习笔记
weixin_52253964的博客
10-31 185
Vue.js 组件学习笔记
【Vue】学习笔记：Vue组件
萌狼蓝天の技术栈
09-23 373
文末有我看的这个视频的链接。 目录组件注册全局注册组件基础组件命名规则template选项单项数据流data选项局部注册单独配置组件的选项对象ES6对象属性简写组件通信父组件向子组件传值组件传值Props命名规则练习：通过v-for创建组件子组件向父组件传值组件传值自定义事件传值非父子组件传值其他通信方式组件插槽内置组件组件注册 全局注册 全局注册的组件可以在注册后用于任意实例或者组件中 Vue...
vue组件基础笔记一
wkj_1996的博客
09-26 152
vue组件基础笔记一 1、Vue里面组件的扩展功能是通过 Vue.extend() 来做扩展的。 2、组件的扩展中的options和 new Vue( options )使用一致 Vue.extend()不进行实例化 也就是不用 new Vue.extend() 3、全局注册： const Hello = Vue.extend({ // template选项是为了确定一个模板，模...
vueJS组件笔记（针对.vue组件）
赵圆圆
12-19 645
data必须是函数详见尤大大： https://cn.vuejs.org/v2/guide/components.html#DOM-%E6%A8%A1%E6%9D%BF%E8%A7%A3%E6%9E%90%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9在data函数中，我们可以通过为每个组件返回全新的数据对象，这样不会污染其他组件。data (){ var da
vue学习笔记：Vue组件
杨威的博客
05-05 580
每个.vue组件都由3部分构成，分别是： （1）template:组件的模板结构 （2）script:组件的javascript代码 （3）style:组件的样式 1、组件中的data不能是一个对象。必须是一个函数，通过return 返回一个数据对象： <script> export default{ data(){ return { userName:"张三丰" } } } </script>
vue项目开发全局组件笔记
Coding_Jia的博客
01-30 496
在开发vue项目时，经常会用到element UI组件，在全局使用像message，toast，alert等组件得时候会很方便，但是在开发需要UI制定的项目时，就不能使用element UI了，这时就需要自己去开发属于自己的组件库了。 具体的开发方法官网提供了。下面我们就根据官网提供的方法来开发属于我们自己的alert警告组件 首先我们要在src/components文件夹下创建一个alert文...
【笔记整理】vue.js笔记
zzjj6543212的博客
03-09 685
### 准备开始 1:主要学习的是VUE，快速进入VUE让大家体会VUE的使用 2:webpack前端构建构建，前期铺垫基本使用，后面看到不晕 3:在做完项目以后，模拟项目开发的真实打包，区分打包的意义所在(webpack) #### 复习 * webpack属性配置 ```javascript const path = require('path')...
VUE学习笔记：8.vue组件化之概述，基本使用，全局组件与局部组件概念，父组件与子组件的概念
ouyicnm的博客
06-08 363
1.什么是组件化开发 （1）组件化思想 （2）vue组件化思想 现在前端的开发潮流是组件化开发。组件也可以简单理解为自定义的标签。将一些前端内容的HTML，CSS，JS等设置好，一起放入一个组件中来维护。 组件就是可复用的vue实例，项目实际开发中一般在.vue的文件中维护组件 一个页面可以使用几个组件来拼装出来，每个组件中还可以嵌套其他组件 （3）注册使用组件的步骤 2.组件化的基本使用过程 组件的使用过程分为三步： 创建组件构造器：let 构造器名字 = Vue.extend({ temp
Vue的学习笔记四：组件
九天翔龙的技术博客
08-08 256
组件，组合起来的部件，可以简单理解为组成一个应用的“零件”。一个应用，是由多个组件构成的。而且组件还可以包含组件。包含组件的，就是父组件。被包含的组件，就是子组件。父组件使用子组件。每个组件都有 template。入口：通过入口，可以看到更广袤的天地。程序中的入口，通过简短的代码可以调用更复杂的代码（函数其实就是典型的入口）。Vue 中，入口也属于组件。...
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
综上所述，前端Bootstrap Es6 vue学习笔记囊括了前端开发的关键技术，包括基础环境配置、样式排版、响应式布局、组件、内置插件、HTML5 CSS3支持、LESS动态样式和Vue.js等。通过学习这些技术，我们可以更好地进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值