Vue入门基础

最新推荐文章于 2023-11-07 14:31:36 发布

ActStrady

最新推荐文章于 2023-11-07 14:31:36 发布

阅读量280

点赞数

分类专栏： vue 架构之路文章标签： vue

本文链接：https://blog.csdn.net/bodyandsoul/article/details/100515054

版权

架构之路同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

组件

子父组件
其实简单理解就是被使用的就是子组件，子组件在父组件里被使用，子组件可以向父组件传递一个事件用来改变父组件的值，父组件向子组件传递值，这个是单向绑定。

子父组件间的传值

<!DOCTYPE html>
<html>
	<!-- 没有使用函数的版本，直接在事件上写操作 -->
	<head>
		<meta charset="utf-8">
		<title>todoList</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 这里的根节点就是父组件 -->
		<div id="todo">
			<input v-model="name" placeholder="请输入代办事项" />
			<!-- 直接在这里写增加操作 -->
			<button v-on:click="list.push(name)">增加</button>
			<ol>
				<h3>待办事项：</h3>
				<!-- for中需要指定唯一的key -->
				<!-- 这就是一个子组件 del是通过$emit从子组件传递，而todo是传递到子组件的值，故要绑定值-->
				<!-- 这里也可以说父组件在监听事件 -->
				<todo-list 
					v-for="(item, index) in list" 
					:todo="item" :key="index" 
					v-on:del="list.splice(index, 1)">
				</todo-list>
			</ol>
		</div>
	</body>
	<script>
		// 组件 Vue 的组件也是一个实例
		Vue.component('todo-list', {
			// 父组件利用prop给子组件传值
			props: ['todo'],
			// 子组件利用$emit来给父组件传一个事件
			template: `
				<li v-on:click="$emit('del')">
					<h4>
						{{ todo + ' '}}
						<button> 删除 </button>
					</h4>
				</li>
			`
		})
		var vm = new Vue({
			el: '#todo',
			data: {
				name: '',
				list: ['吃饭', '睡觉', '打豆豆'],
			}
		})
	</script>
</html>

上边例子很好的解释了子父组件的关系和他们之间的传值方式。
2. 组件的复用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的复用</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="components">
			<!-- 复用，每个都不影响 -->
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
	</body>
</html>
<script>
	Vue.component('button-counter', {
		// 这里模板的data必须声明为一个函数,这样才能使用他的count
		data: function() {
			return {
				count: 0
			}
		},
		template: `<button v-on:click="count++">点击了{{ count }}次</button>`
	})
	new Vue({
		el: '#components'
	})
</script>

注意的是data必须是一个函数

ActStrady

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门基础

组件子父组件其实简单理解就是被使用的就是子组件，子组件在父组件里被使用，子组件可以向父组件传递一个事件用来改变父组件的值，父组件向子组件传递值，这个是单向绑定。子父组件间的传值<!DOCTYPE html><html>  <head> <meta charset=...
复制链接

扫一扫

专栏目录