vue 父子组件通信

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_30497527

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量38

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/IT123/p/10880293.html

博客主要介绍了父子组件间的传值问题，包括父组件向子组件传值以及子组件向父组件传值，涉及前端开发中 JavaScript 的应用。

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

1、父组件向子组件进行传值：

父组件

<template>
   <div>
      <input type="text" v-model="name">
      <!-- 引入子组件 -->
      <child :inputName="name"></child>
   </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件

<template>
    <div>
      子组件:
      <span>{{inputName}}</span>
    </div>
  </template>
  <script>
    export default {
      // 接受父组件的值
      props: {
        inputName: String,
        required: true
      }
    }
  </script>

2、子组件向父组件进行传值：

子组件

<template>
    <div>
      子组件:
      <span>{{childValue}}</span>
      <!-- 定义一个子组件传值的方法 -->
      <input type="button" value="点击触发" @click="childClick">
    </div>
  </template>
  <script>
    export default {
      data () {
        return {
          childValue: '我是子组件的数据'
        }
      },
      methods: {
        childClick () {
          // childByValue是在父组件on监听的方法
          // 第二个参数this.childValue是需要传的值
          this.$emit('childByValue', this.childValue)
        }
      }
    }
  </script>

父组件

<template>
    <div>
      父组件:
      <span>{{name}}</span>
      <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
      <child v-on:childByValue="childByValue"></child>
    </div>
  </template>
  <script>
    import child from './child'
    export default {
      components: {
        child
      },
      data () {
        return {
          name: ''
        }
      },
      methods: {
        childByValue: function (childValue) {
          // childValue就是子组件传过来的值
          this.name = childValue
        }
      }
    }
  </script>

转载于:https://www.cnblogs.com/IT123/p/10880293.html