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>  

 子组件调用父元素的方法

子组件 调用方法

this.$parent.fatherMethod('hello');