Vue 父子组件传值

最新推荐文章于 2024-04-14 23:34:00 发布

绪锋

最新推荐文章于 2024-04-14 23:34:00 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue 父子组件通讯传值

本文链接：https://blog.youkuaiyun.com/sinat_34531165/article/details/81076616

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的Vue.js应用程序中如何实现父子组件之间的数据传递。通过具体代码示例展示了父组件如何向子组件传递字符串类型的数据，并在子组件中正确显示。

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

父组件：

<template>
  <div class="index">
    <index-child :childVal="msg"></index-child>
  </div>
</template>

<script>
  /*引入vux组件*/
  import indexChild from './indexChild.vue'
  export default {
    name: 'App',
    data(){
      return {
        msg:'这是从父组件传过去的值'
      }
    },
    components: {
      indexChild
    }
  }
</script>

子组件再接受这个值

<template>
<div>
  <p>接收父组件传过来的值：{{childVal}}</p>
</div>
</template>

<script>
    export default {
      data() {
        return {}
      },
      props:{
        childVal:String
      }
    }
</script>

<style scoped>

</style>

动态的传值也是类似的，可以举一反三。