35、子组件向父组件传值

最新推荐文章于 2024-07-24 06:54:05 发布

code_dream_wq

最新推荐文章于 2024-07-24 06:54:05 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue学习

本文链接：https://blog.youkuaiyun.com/code_dream_wq/article/details/110480384

vue学习专栏收录该内容

40 篇文章

订阅专栏

博客介绍了子组件向父组件传值的方法。子组件使用`$emit()`触发事件，该方法第一个参数为自定义事件名称，第二个参数是要传递的数据；父组件则用v - on监听子组件的事件，并给出了传参例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件向父组件传值

- 子组件用`$emit()`触发事件
- `$emit()` 第一个参数为自定义的事件名称第二个参数为需要传递的数据
- 父组件用v-on 监听子组件的事件

<!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>
	
	<!-- 2 父组件用v-on 监听子组件的事件
	 	这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	 -->
	
    <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-基本用法
      props传递数据原则：单向数据流
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
		  /*  1、子组件用$emit()触发事件
			 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  */
          <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(){
          // 扩大字体大小
          this.fontSize += 5;
        }
      }
    });
  </script>
</body>
</html>

传参例子：

<!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>
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-携带参数
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</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>