019_Vue子组件向父组件传值

最新推荐文章于 2024-07-12 21:26:02 发布

原创最新推荐文章于 2024-07-12 21:26:02 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何实现父子组件之间的数据传递和事件监听。首先，通过props从父组件向子组件单向传递数据。然后，演示了子组件如何通过自定义事件向父组件发送信息，包括传递参数。最后，展示了实际的HTML和JavaScript代码示例，以及操作后的效果，包括扩大和缩小字体大小的交互功能。这为理解和应用Vue.js的组件通信机制提供了清晰的指导。

1. 父组件向子组件传递信息

1.1. props传递数据原则: 单向数据流。

1.2. 子组件通过自定义事件向父组件传递信息

<button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>

1.3. 父组件监听子组件的事件

<menu-item :arr='parr' @enlarge-text='handle'></menu-item>

methods: {
	handle: function(){
			
	}
}

1.4. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父组件向子组件传递信息</title>
	</head>
	<body>
		<div id="app">
			<div :style='{fontSize: psize + "px"}'>{{pmsg}}</div>
    		<menu-item :arr='parr' @enlarge-text='handle'></menu-item>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('menu-item', {
      			props: ['arr'],
      			template: `
        			<div>
          				<ul>
            				<li :key='index' v-for='(item,index) in arr'>{{item}}</li>
          				</ul>
          				<button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
        			</div>
      			`
    		});

			var vm = new Vue({
				el: "#app",
				data: {
					pmsg: '父组件中内容',
					parr: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计"],
					psize: 10
				},
				methods: {
					handle: function(){
          				// 扩大字体大小
          				this.psize += 5;
        			}
				}
			});
		</script>
	</body>
</html>

1.5. 效果图

1.6. 点击扩大父组件中字体大小按钮

2. 父组件向子组件传值

2.1. 子组件通过自定义事件向父组件传值

<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>

2.2. 父组件监听子组件的事件

<menu-item :arr='parr' @enlarge-text='handle($event)'></menu-item>

methods: {
	handle: function(val){
			
	}
}

2.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>子组件向父组件传值</title>
	</head>
	<body>
		<div id="app">
			<div :style='{fontSize: psize + "px"}'>{{pmsg}}</div>
    		<menu-item :arr='parr' @enlarge-text='handle($event)'></menu-item>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('menu-item', {
      			props: ['arr'],
      			template: `
        			<div>
          				<ul>
            				<li :key='index' v-for='(item,index) in arr'>{{item}}</li>
          				</ul>
          				<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          				<button @click='$emit("enlarge-text", -5)'>缩小父组件中字体大小</button>
        			</div>
      			`
    		});

			var vm = new Vue({
				el: "#app",
				data: {
					pmsg: '父组件中内容',
					parr: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计"],
					psize: 10
				},
				methods: {
					handle: function(val){
          				this.psize += val;
        			}
				}
			});
		</script>
	</body>
</html>

2.4. 效果图