Vue父子组件传值 | 父传子 | 子传父

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_30674525

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Model-Zachary/p/9115879.html

本文详细介绍了Vue.js中实现父子组件间数据传递的方法。包括从父组件向子组件传递数据及从子组件向父组件触发事件的方式。通过具体示例展示了如何在Vue项目中有效地进行组件间的通信。

父传子

父容器

<template>
<div>
      <zdy :module='test'></zdy>
</div>
</template>

<script>
import zj from "./zj";
// 父传子
export default {
    components:{
        // 映射写法
         'zdy':zj,
        // 另一种写法 直接写
        //  zj,
    },
    data(){
        return{
            test:123
        }
    }
}
</script>

子容器

<template>
<div>
   <div v-html="module"></div>
</div>
</template>

<script>
    export default {
        name: 'module',
        // 数组形式
        props: ['module'],
        // 对象形式 这种 声明就要求 传过来的必须是 对象 规定了 type 
        // props: {
        //   seller: {
        //     type: Object
        //   }
        // },
        //默认值 如果 传过来的值为空 则取default 的默认值
        //props:{value:[number,string],default:0}
    }
</script>

子传父（可以通过$on来回调$emit给父级的值）

父容器

<template>
　　<div>
     　　<zdy @sedParentDate='receptionChildDate'></zdy>
　　</div>
</template>

<script>
import zj from "./zj";
 // 子传父
export default {
    components:{
        // 映射写法
         'zdy':zj,
        // 另一种写法 直接写
        //  zj,
    },
    data(){
        return{
            
        }
    },
    methods:{
        receptionChildDate(data){
        console.log(data)
        }
    }
}
</script>

子容器

<template>
<div>
   <div @click="childClick">点我</div>
</div>
</template>

<script>
export default {
    name: 'module',
    // 数组形式
    props: ['module'],
    // 对象形式
    // props: {
    //   seller: {
    //     type: Object
    //   }
    // },

    methods:{
        childClick(){
        //    子传值到父（外部调用内部事件）
           this.$emit('sedParentDate','我是子组件传过来的值')
        }
    },
    mounted () {
      this.$on('sedParentDate', (data) => {
        console.log('在自己这里打印出来', data) // 我是子组件传过来的值
      })
    }    
}
</script>