Vue组件开发

最新推荐文章于 2024-05-02 08:06:07 发布

一麻袋小猫

最新推荐文章于 2024-05-02 08:06:07 发布

阅读量206

点赞数

分类专栏： Vue基础练习文章标签： vue.js

本文链接：https://blog.csdn.net/Zmongo/article/details/105724232

版权

Vue基础同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

练习

4 篇文章 0 订阅

订阅专栏

组件化开发思想

标准、分治、重用、组合

组件化规范 Web Components（标准化组织制定的规范）

我们希望尽可能多的重用代码
自定义组件的方式不太容易
多次使用组件可能导致冲突
Vue部分实现了上述规范

组件注册

在这里插入图片描述

组件用法

在这里插入图片描述

<div id="app">
	<button-counter></button-counter>
	</div>
	<script src="js/vue.js"></script>
	<script>
		Vue.component('button-counter',{
			data: function () {
				return {
					count: 0
				}
			},
			template: '<button @click="count++">点击了{{count}}次</button>'
		})
		var vm = new Vue({
			el: '#app',
			data: {

			}
		})
	</script>

组件注册注意事项

data必须是一个函数
//这里data是要是函数
data: function () {
return {
count: 0
}
组件模板内容必须是单个跟元素
template: ‘<button @click=“handle”>点击了{{count}}次’,
组件模板内容可以是模板字符串
组件命名方式

如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的使用组件。但是在普通的标签模板总，必须使用短横线的方式使用组件。

在这里插入图片描述

局部组件注册

在这里插入图片描述

组件间的数据交互

父组件向子组件传值
在这里插入图片描述

<div id="app">
		<div>{{pmsg}}</div>
		<!-- //子组件 父组件的内容通过属性绑定的方式传递给子组件 -->
		<menu-item title='来自父组件的值'></menu-item>
		<menu-item :title='ptitle'></menu-item>
	</div>
	<script src="js/vue.js"></script>
	<script>
		Vue.component('menu-item', {
			props: ['title'],
			data: function () {
				return {
					msg: '子组件本身的数据'
				}
			},
			template: '<div>{{msg+ "---" + title}}</div>'
		});
		var vm = new Vue({
			el: '#app',
			data: {
				pmsg: '父组件中的内容',
				ptitle: '动态绑定属性'
			}
		});
	</script>

在这里插入图片描述

props属性值类型

子组件向父组件传值
props传递数据原则：单向数据流，只能用于父组件向子组件传递

首先子组件触发一个自定义事件，同时父组件监听这个自定义事件，当子组件触发时会把事件抛出给父组件，父组件会执行相应的动作。
在这里插入图片描述
子组件向父组件传值的案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
		<!-- //属于父组件的模板 -->
		<!-- 接收子组件中的数值用$event -->
		<menu-item :parr='parr' 
	@enlarge-text='handle($event)'></menu-item>
	</div>
	<script src="js/vue.js"></script>
	<script>
		// 子组件
		Vue.component('menu-item', {
			props: ['parr'],
			template: `
				<div>
					<ul>
						<li :key='index' v-for='(item, index) in parr'>{{item}}</li>
						<button @click='parr.push("lemon")'>点击</button>
					</ul>
					<button @click='$emit("enlarge-text", 5)'>字体大小</button>
				</div>
			`
		});
		// 父组件
		var vm = new Vue({
			el: '#app',
			data: {
				pmsg: '父组件中内容',
				parr: ['apple', 'orange', 'banana'],
				fontSize: 10
			},
			methods: {
				handle: function (val) {
					//扩大字体大小
					this.fontSize += val; 
				}
			}
		})
	</script>
</body>
</html>

一麻袋小猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件开发

组件化开发思想标准、分治、重用、组合组件化规范 Web Components（标准化组织制定的规范）我们希望尽可能多的重用代码自定义组件的方式不太容易多次使用组件可能导致冲突Vue部分实现了上述规范组件注册组件用法<div id="app"> <button-counter></button-counter> </div>...
复制链接

扫一扫

专栏目录