vue11--组件之间的通信--子组件往父组件传值(不可自动触发)

最新推荐文章于 2024-09-22 21:23:41 发布

婉菡

最新推荐文章于 2024-09-22 21:23:41 发布

阅读量277

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113799130

版权

本文探讨了在Vue.js中如何实现子组件向父组件传递数据的机制，特别强调了在子组件中手动触发事件来更新父组件状态的方法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>组件之间的通信--子组件往父组件传值(不可自动触发)</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>

	<body>
		<div id="app">
			子组件往父组件传值
			<father></father>
		</div>

		<template id="father">
			<div>
				<p>这是父组件</p>
				<p>来自于子组件的数据:{
  {sondata}}</p>
				<son @get-info="get"></son>
			</div>
		</template>

<!--
	子组件向父组件传值:
	1.子组件中必须时间出发去传值
	2.子组件定义时,触发事件的属性名必须是xxx-xxx的形式
	3.子组件定义时,触发父组件执行的函数名的声明部分不能加()
	
-->

		<template id="son">
			<div>
				这是子组件
				<div>
					电话号码:<input type="text" v-model="tel" />
				</div>
				<div>
					<button type="button" @click="sendInf