vue3 复杂的多页面之间的传值和获取值

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来接收

posted @ 2020-11-15 19:34  一封未寄出的信  阅读(8305)  评论(0)  编辑  收藏  举报