Vue中组件传值（父组件向子组件传值+子组件向父组件传值+兄弟组件传值）

父组件向子组件传值

具体代码如下：

• 父

//父
<template>
    <div>
        <value-header :detail=detail></value-header>
    </div>
</template>
<script>
import ValueHeader from "../../pages/passValue/ValueHeader.vue"
export default {
    name:"passValue",
    components:{ValueHeader},
    data(){
        return{
            detail:[
                {
                    isHasValue:true,
                    name:"文具",
                    totalTit:[
                        {
                            tit1:"铅笔",
                            price:"23"
                        },
                        {
                            tit1:"笔记本",
                            price:"45"
                        }
                    ]
                },
                {
                    isHasValue:true,
                    name:"服装",
                    totalTit:[
                        {
                            tit1:"T恤",
                            price:"99"
                        },
                        {
                            tit1:"衬衫",
                            price:"126"
                        }
                    ]
                },
                {
                    isHasValue:false,
                    name:"服装",
                    totalTit:[
                        {
                            tit1:"T恤",
                            price:"99"
                        },
                        {
                            tit1:"衬衫",
                            price:"126"
                        }
                    ]
                }
            ]
        }
    }
}
</script>
<style>
</style>

• 子
  
  

代码如下：

<template>
    <div>
        <h1>hello 我是组件传值</h1>
        <div class="box">
            <ul :detail=detail>
                <li v-for="(p,index) in  detail" :key="index">
                    <h3>{{p.name}}</h3>
                    <h4 v-for="(detailItem,detailKey) in p.totalTit" :key="detailKey" v-show="p.isHasValue">
                        <span>{{detailItem.tit1}}</span>
                        <span>{{detailItem.price}}</span>
                    </h4>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:"ValueHeader",
    props:["detail"],
    
}
</script>
<style>
</style>

子组件向父组件传值

//在子组件中写事件
	 @click="sendParent(index)"