vue组件通信之props

最新推荐文章于 2024-01-25 14:33:07 发布

一杯雪花勇闯天涯

最新推荐文章于 2024-01-25 14:33:07 发布

阅读量199

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109428793

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

前言
一.vue组件之通信
1. 概要
2.示例代码
3.展示效果
总结

前言

学习vue组件通信之props

提示：以下是本篇文章正文内容，下面案例可供参考

一.vue组件之通信

1. 概要

目的:要在子组件使用数据a，a的值来源于父组件
props:字符数组 -> props:[‘a’]
1.a是组件的属性
2.a的用法和data中数据用法一样
3.a的值来源于父组件

2.示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue组件之通信</title>
	</head>
	<body>
		<div id="app">
			<child-a a="200"></child-a>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
	Vue.component("child-a",{
		template:"<button>我是子组件{{a}}</button>",
		props:["a"]
	});
	new Vue({
		el:"#app"
	});
</script>

3.展示效果

在这里插入图片描述

总结

学习vue组件通信之props

一杯雪花勇闯天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件通信之props

文章目录前言一.vue组件之通信1. 概要2.示例代码3.展示效果总结前言学习vue组件通信之props提示：以下是本篇文章正文内容，下面案例可供参考一.vue组件之通信1. 概要目的:要在子组件使用数据a，a的值来源于父组件props:字符数组 -> props:[‘a’]1.a是组件的属性2.a的用法和data中数据用法一样3.a的值来源于父组件2.示例代码<!DOCTYPE html><html> <head> <m
复制链接

扫一扫