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'],
        // 对象行使
        // props: {
        //   seller: {
        //     type: Object
        //   }
        // },

    }
</script>

子传父

父容器

<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','我是子组件传过来的值')
        }
    }
}
</script>