vue元件通訊之props

々橙若℃ №發表於2020-11-01
Vue元件

文章目錄

前言

學習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

相關文章