vue.js 组件基础（vue 八）

最新推荐文章于 2023-02-23 07:59:53 发布

dengjili

最新推荐文章于 2023-02-23 07:59:53 发布

阅读量360

点赞数 1

分类专栏：前端 vue.js

随意转载。

本文链接：https://blog.csdn.net/dengjili/article/details/86695900

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue.js

9 篇文章 0 订阅

订阅专栏

基本示例

这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' })

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

在这里插入图片描述

组件的复用

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

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

在这里插入图片描述

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

通过 Prop 向子组件传递数据

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

在这里插入图片描述

完整例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件基础</title>
</head>
<body>
	<h3>组件基础</h3>

	<div id="components-demo">
	  <button-counter></button-counter><br/>
	  <button-counter></button-counter><br/>
	  <blog-post title="My journey with Vue"></blog-post>
	  <blog-post title="Blogging with Vue"></blog-post>
      <blog-post title="Why Vue is so fun"></blog-post>
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	//定义一个名为 button-counter 的新组件
	Vue.component('button-counter', {
		data: function () {
			  return {
			    count: 0
			  }
		},
	 	 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
	});
	
	Vue.component('blog-post', {
		  props: ['title'],
		  template: '<h3>{{ title }}</h3>'
	});
	
	new Vue({
		el : '#components-demo'
	})
</script>
</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>

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop

单个根元素

当构建一个 <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>

所以是时候重构一下这个 <blog-post> 组件了，让它变成接受一个单独的 post prop：

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

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

完整例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件基础</title>
</head>
<body>
	<h3>组件基础</h3>

	<div id="blog-post-demo">
	  <blog-post v-for="post in posts" v-bind:key="post.id"
 		 v-bind:title="post.title"></blog-post>
	</div>
	单个根元素
	<div id="blog-post-demo2">
		<blog-post2
		  v-for="post in posts2"
		  v-bind:key="post.id"
		  v-bind:post="post"
		></blog-post2>
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	Vue.component('blog-post', {
		  props: ['title'],
		  template: '<h3>{{ title }}</h3>'
	});
	
	Vue.component('blog-post2', {
	  props: ['post'],
	  template: '<div class="blog-post"><h3>{{ post.title }}</h3><div v-html="post.content"></div></div>'
	})
	
	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' }
	    ]
	  }
	})
	new Vue({
		  el: '#blog-post-demo2',
		  data: {
		    posts2: [
		      { title: 1, content: '<h5>My journey with Vue</h5>' },
		      { title: 2, content: '<h5>Blogging with Vue</h5>' },
		      { title: 3, content: '<h5>Why Vue is so fun</h5>' }
		    ]
		  }
		})
</script>
</html>

测试结果
在这里插入图片描述

dengjili

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js 组件基础（vue 八）

基本示例这里有一个 Vue 组件的示例：// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '&lt;button v-on:click="count++"&gt;You c...
复制链接

扫一扫