Vue组件父类和子类之间传值

最新推荐文章于 2025-05-13 13:49:32 发布

oracle11770

最新推荐文章于 2025-05-13 13:49:32 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习笔记

本文链接：https://blog.youkuaiyun.com/oracle11770/article/details/80359874

Vue学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue中组件间的值传递方式，包括父组件如何向子组件传递数据，以及子组件如何将值反馈回父组件。在Vue中，由于组件间数据不共享，通常通过props进行单向数据流。文章通过实例展示了具体的实现过程和运行效果。

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

因Vue组件之间值不能共享，所以需要通过内部指定属性进行传递。（PS：驼峰命名，标签引用是要用-隔开）

一，父类组件向子类组件传值

<body>
    <div id="app">
      <user-Parent-Comp></user-Parent-Comp>
    </div>
</body>


<script>
  var vm = new Vue({
    el: '#app',
    components: {
      'userParentComp': {
        template: '<h1>I am a parent component.---{{parentVal}}<br/><userChildComp :childVal="fromParentVal"/></h1>',
        data() {
          return {
            parentVal: 'I am the value of a parent class. ',
            fromParentVal: 'I am a value from the parent class. '
          }
        },
        components: {
          'userChildComp': {
            props: ['childVal'],
            template: '<p>I am a child component.---{{childVal}}  </p>'
          }
        }
      }
    }
  })

</script>

运行效果：

二、子组件传值到父组件。

<body>
  <div id="app">
    <user-Parent-Comp></user-Parent-Comp>
  </div>
</body>


  <script>
  var vm = new Vue({
    el: '#app',
    components: {
      'userParentComp': {
        template: '<h1>I am a parent component.---{{fromChildVal}} <userChildComp @upParamsFun="fillValFun"></userChildComp></h1>',
        data() {
          return {
            fromChildVal: 'default parentVal'
          }
        },
        methods: {
          fillValFun(upVal) {
            this.fromChildVal = upVal;
          }
        },
        components: {
          'userChildComp': {
            data() {
              return {
                fromChildVal: 'I am a value from the child class. '
              }
            },
            template: '<p v-on:click="userFun">I am a child component.点击我就发送数据到父组件 </p>',
            methods: {
              userFun() {
                this.$emit('upParamsFun', 'I am a value from the child class.');
              }
            }
          }
        }
      }
    }
  })
  </script>

运行效果：

步骤一：点击前