Vue中父子组件之间传值

最新推荐文章于 2025-06-17 10:37:35 发布

原创最新推荐文章于 2025-06-17 10:37:35 发布 · 654 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue学习专栏收录该内容

36 篇文章

订阅专栏

这篇博客详细介绍了在 Vue.js 中如何通过props从父组件向子组件传递数据，以及如何使用事件机制让子组件向父组件发送消息。示例代码展示了如何定义props和使用$emit触发自定义事件来实现组件间的通信。

通过props向子组件传递数据
通过事件向父组件发送消息

父传子案例：

<div id="app">
  <cpn :cmovies="movies"></cpn>
</div>

<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  //父传子：props
  const cpn = {
    template:'#cpn',
    // props:['cmovies']
    props:{
      cmovies:{
        type:Array,
        default(){
          return []
        }  
      },
    }
  }
const app = new Vue({
  el:'#app',
  data(){
    return{
      movies:['雷神','复仇者联盟']
    }
  },
  components:{
    cpn
  }
})
</script>

子传父案例：

<!-- 父组件模板 -->
<div id="app">
  <!-- 监听子组件发射事件 -->
  <cpn @itemclick="cpnClick"></cpn>

</div>
<!-- 子组件模板 -->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

// 子组件
const cpn = {
  template:'#cpn',
  data(){
    return{
      categories:[
        {id:'1',name:'系统首页'},
        {id:'2',name:'数据管理'},
        {id:'3',name:'地图操作'},
        {id:'4',name:'数据审查'}
      ]
    }
  },
  methods:{
    btnClick(item){
      //子组件发射事件
      this.$emit('itemclick',item)
    }
  }
}
// 父组件
const app = new Vue({
  el:'#app',
  data(){
    return{
      categories:[
        {id:'1',name:'系统首页'},
        {id:'2',name:'数据管理'},
        {id:'3',name:'地图操作'},
        {id:'4',name:'数据审查'}
      ]
    }
  },
  components:{
    cpn
  },
  methods:{
    cpnClick(item){//监听子组件发射事件，自定义处理事件
      console.log('cpnClick',item);
    }
  }
})
</script>