Vue入门（七）

最新推荐文章于 2023-12-30 10:16:57 发布

疯狂的格式化

最新推荐文章于 2023-12-30 10:16:57 发布

阅读量312

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57203243/article/details/125464718

版权

Vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue中的组件——组件与实例的关系

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

	<body>
		<div id="root">
			<div>
				<input v-model="inputValue" />
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
				<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
			</ul>
		</div>

		<script>
			Vue.component('todo-item', {
				props: ['content'],
				template: '<li>{{content}}</li>'
			})

			new Vue({
				el: "#root",
				data: {
					inputValue: '',
					list: []
				},
				methods: {
					handleSubmit: function() {
						this.list.push(this.inputValue)
						this.inputValue = ''
					}
				}
			})
		</script>
	</body>

因为组件是可复用的 Vue 实例（每用一次组件，就会有一个它的新实例被创建。），所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

		<script>
			Vue.component('todo-item', {
				props: ['content'], 
				template: '<li @click="handleClick">{{content}}</li>',
				methods: {
					handleClick: function() {
						alert('clicked')
					}
				}
			})
		</script>

效果图：

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。如果 Vue 没有这条规则，重复使用组件时可能会影响到其它所有实例。

添加下面的代码：

可以发现效果如下：

如果 data 部分代码写成 data: {title: "每个组件都是vue实例"}，那么不会有效果：

还报错：

		<script>
			Vue.component('todo-item', {
				props: ['content'],
				data: function() {
					return {
						title: "每个组件都是vue实例"
					}
				},
				template: '<li @click="handleClick" :title="title">{{content}}</li>',
				methods: {
					handleClick: function() {
						alert('clicked')
					}
				}
			})

			new Vue({
				el: "#root",
				data: {
					inputValue: '',
					list: []
				},
				methods: {
					handleSubmit: function() {
						this.list.push(this.inputValue)
						this.inputValue = ''
					}
				}
			})
		</script>