3个页面之间互相传值，取值
app.vue(父级页面)
first.vue（子级页面）
second.vue（子级页面）
先声明页面情况:把数据定义在app.vue（父级）中，first.vue（子级）需要拿到定义在app.vue（父级）中的数据，second.vue（子级）需要通过app.vue(父级)来到拿到first.vue（子级，和second.vue是兄弟【同级】）中点击的某一个元素
app.vue（父级）中
<template>
<first :resourceChild="resource" @fatherHomeClick="selectResource"></first>
<second :detialsResource="selectedResource"></second>
</template>
<script>
import{toRefs,reactive} from "vue"
import first from "first.vue的路径"
importsecond from" second.vue的路径"
export default{
components:{
first,
second
},
setup(){
const data= reactive({
resource:[
{
_id:"1",
title:"新闻1",
description:"新闻新闻",
type:"video",
link:""
},
{
_id:"2",
title:"新闻2",
description:"新闻新闻",
type:"video2",
link:""
},
{
_id:"3",
title:"新闻3",
description:"新闻新闻",
type:"video3",
link:""
},
{
_id:"4",
title:"新闻4",
description:"新闻新闻4",
type:"video",
link:""
},
{
_id:"5",
title:"新闻5",
description:"新闻新闻5",
type:"video",
link:""
},
{
_id:"6",
title:"新闻6",
description:"新闻新闻6",
type:"video",
link:""
},
{
_id:"7",
title:"新闻7",
description:"新闻新闻7",
type:"video",
link:""
}
]
})这里的数据就是用来接收子级first.vue中传递过来的数据
const selectedResource = ref(null);
const selectResource = (res) =>{
// console.log(res);
//声明一个变量来接收数据
selectedResource.value= res;
};
return{ .../toRefs(data)，selectedResource，selectResource }
}
}
</script>
注释：
1. :resourceChild="resource" 详解：:resourceChild是传给子级first.vue，因为在app.vue中进行了声明resource是数据名，所以这句话的意思就是通过:resourceChild把数据传递到first.vue中； @fatherHomeClick="selectResource"中@fatherHomeClick是子级中定义注册的一个点击事件，这个是点击事件的名称，selectResource是app.vue中的一个点击事件，后面不能接（）
2. :detialsResource="selectedResource"详解： :detialsResource是绑定属性的形式传值，selsectedResource是父级中定义的，而detialsResources是在子级中进行接收的
3. 因为数据要解包，所以用到toRefs，需要在app.vue的顶部进行引用
4. 因为要写数据，所以需要用到reactive，也是需要在app.vue的顶部进行引用
first.vue(是app.vue的子级，是first.vue的兄弟【同级】)中
<template>
<ul class="list-group mb-3 resource-list">
<li v-for=" item in resourceChild" :key="item._id" @click="onItemClick(item)" class="list-group-item d-flex justify-content-between bg-light resource-list-item">
<div class="text-success">
<h6 class="my-0">{{item.title}}</h6>
<small class="text-muted">{{item.description}}</small>
</div>
<span class="text-muted">{{item.type}}</span>
</li>
</ul>
</template>
<script>
props:{
resourceChild:{
type:Array,
default:[] //还有一种写法 default ()=>[]
}
},
setup( props,context){
const onItemClick = (item)=>{
context.emit("fatherHomeClick",item);
};
return{onItemClick};
}
<script>注释：
1. props:{resourceChild:{}} 详解:props是用来接收父级传入的值得，而resourceChild是用来接收值得名称，这里的resourceChild是不能随意起名字的，需要同父级绑定的名称一样才可以，当拿到数据后，就可以对数据拆分，拿到自己想要的数据。但是这个里拿到的数据还是一个数组的形式，当数据多条的时候可以采用v-for循环来获取对应的数据
2.<li v-for=" item in resourceChild" :key="item._id" @click="onItemClick(item)" class="list-group-item d-flex justify-content-between bg-light resource-list-item"> 详解：当拿到数据的resourceChild，是一个数组，通过v-for循环的方式来展现出每一条数据，item in resourceChild就是来循环出每一条数据的，而现在的每一条数据就是用item来代替，所以当id获取的方式就是item._id,@click = onItemClick(item)，这里为什么是传的item ,因为是的点击事件是为了要清楚的知道点击的是哪一个/那一条，就要传点击事件的本身（对象），所以是item,当进行事件注册的时候，是方便数据在app.vue中进行中转传入到second.vue中进行展示
second.vue(是app.vue的子级，是first.vue的兄弟【同级】)
<template>
<!-- 这里进行了一次判断v-if和v-else 因为在没有点击的情况下左侧是空的，所以进行一次传值点击之前的判断，判断！detialsResource的id有没有，当没有情况下给出提示，当点击之后，有id的时候就正常显示 -->
<div class="card" v-if="!detialsResource?._id">
<div class="card-body">
No detialsResource is select
</div>
</div>
<div v-else class="card">
<div class="card-header">{{detialsResource.title}}</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>{{detialsResource.description}}</p>
<footer class="text-muted mb-2">{{detialsResource.type}}</footer>
</blockquote>
<a href="#" class="btn btn-primary">编辑</a>
</div>
</div>
</template>
<script>
export default {
props :{
detialsResource:{
validator:(prop) => typeof prop ==="object" || prop ===null,
required: true,
}
}
}
<script>
注释：
1.props :{detialsResource:{}}详解： props是用来接收数据的。接收从父级 selectedResource处获取的数据，在通过属性绑定的形式传递给detialsResource，然后根据对应的展示，展示出id，type ,description...
2.进行了一次判断v-if和v-else 因为在没有点击的情况下左侧是空的，所以进行一次传值点击之前的判断，判断！detialsResource的id有没有，当没有情况下给出提示，当点击之后，有id的时候就正常显示
本段难点：
1。通过中转的方式来拿到数据，也就是常说的兄弟页面之间怎么获取，或者是传值，（其实就是通过a传B传c,中间的B就是父级，a和c都是子级，也是彼此的兄弟）就是在a中注册事件，传给B,在B中进行中转赋值，属性绑定在传给c
2。子级获取父级的元素(数据)，父级通过绑定，子级通过props来接收
