vue组件基础

最新推荐文章于 2022-09-19 08:39:14 发布

铁枪王彦章

最新推荐文章于 2022-09-19 08:39:14 发布

阅读量152

点赞数

分类专栏： vue.js学习文章标签： vue组件基础

本文链接：https://blog.csdn.net/rosecurry/article/details/90609382

版权

vue.js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文参考：https://cn.vuejs.org/v2/guide/components.html

Vue组件基础

基本示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div id="demo">
		<button-counter></button-counter>
	</div>

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
	<script>
	Vue.component('button-counter', {
			data: function() {
				return {
					count: 0
				}
			},
			template: '<button v-on:click="count++">You click me {{count}} times.</button>'
		})

		var vue = new Vue({
			el: "#demo" 
		})
		
	</script>
</body>
</html>

上面是一个vue组件的示例。组件是可复用的vue实例，与new Vue接收相同的选项，但el例外。组件会带有一个名字：在这个例子中是 button-counter。

组件的复用

组件可以进行任意次数的复用：

<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

data必须是一个函数

一个组件的 data 选项必须是一个函数，而不是对象。因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

组件注册

有两种组件的注册类型：全局注册和局部注册。

通过Prop向子组件传递

Prop是我们可以在组件上注册的一些自定义特性。当一个值传递给prop特性的时候，它就变成了那个实例实例的属性。下面是一个博文组件案例，通过props选项为博文组件传递标题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div id="demo">
		<blog-post title="h1"></blog-post>
		<blog-post title="h2"></blog-post>
		<blog-post title="h3"></blog-post>
	</div>

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
	<script>	
	//--------博文组件 ------
	Vue.component('blog-post', {
		props: ['title'],
		template:'<h3> {{ title }} </h3>'
	})

	var vue = new Vue({
		el: "#demo"
	})
	</script>
</body>
</html>

然而，在经典的应用中，data中会放着博文数组数据。

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

并想要为每篇博文渲染一个组件：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

单个根元素

当构建一个组件时，这个博文模板最终包含的东西不止一个标题：

<h3>{{ title }}</h3>

最最起码，会包含正文内容：

<h3>{{ title }}</h3>
<div v-html="content"></div>

如果在模板中这样写，Vue 会报错，即every component must have a single root element (每个组件必须只有一个根元素)。可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

当组件变的更复杂时，不只有标题和内容，还需要加上发布时间、评论、点赞数量等等。为每个相关的信息定义一个prop会变得很麻烦：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
  v-bind:content="post.content"
  v-bind:publishedAt="post.publishedAt"
  v-bind:comments="post.comments"
></blog-post>

这就需要重构一下这个组件，让它只接受一个单独prop：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div id="demo">
		<!-- <button-counter></button-counter>
		<button-counter></button-counter>
		<button-counter></button-counter> -->

		<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
		
	</div>

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
	<script>
		
	//--------博文组件 ------
	Vue.component('blog-post', {
		props: ['post'],
		template:`
			<div class="blog-post">
			<h3> {{ post.title }} </h3>
			<div v-html="post.content"></div>
			</div>
		`
	})

	var vue = new Vue({
		el: "#demo",
		data: {
			posts: [
				{ id: 1, title: 'My journey with Vue', content: '内容一' },
				{ id: 2, title: 'Blogging with Vue', content: '内容二' },
				{ id: 3, title: 'Why Vue is so fun', content: '内容三' }
			]
		}
	})
	</script>
</body>
</html>

注意：上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读

监听子组件事件

在开发子组件时，有些功能可能需要和父组件进行沟通。例如我们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize 数据属性来支持这个功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

它可以在模板中用来控制所有博文的字号：

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>

现在在每篇博文正文之前添加一个按钮来放大字号：

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

这个按钮还不具备点击效果，因为还没有为此设置监听事件。可以通过vue实例提供的自定义事件来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

有了这个 v-on:enlarge-text=“postFontSize += 0.1” 监听器，父级组件就会接收该事件并更新 postFontSize 的值。

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如如果想让组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：

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

然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<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
  }
}

在组件上使用v-model

自定义事件也可以创建支持v-model的自定义输入组件。记住：

<input v-model="searchText">

等价于

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

当用在组件上时。v-model则会这样。

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

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

将其 value 特性绑定到一个名叫 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>

通过插槽分发内容

和HTML一样，我们经常需要向一个组件传递内容，像这样：

<alert-box>
	Something bad happened.
</alert-box>

可能会渲染出这样的东西：Error!Something bad happend.

Vue自定义的元素可以很简单地实现这样效果：

Vue.componet('alert-box', {
	template: `
		<div class="demo">
			<strong>Error!</strong>
			<slot></slot>
		</div>
	`
})

如上代码所示，只要在需要的地方加入插槽就行了。

铁枪王彦章

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件基础

1.基本示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="demo"> <button-cou...
复制链接

扫一扫