Vue 组件之间的传值

一、父组件给子组件传值

• 在父组件中注册导入使用子组件
• 在父组件中创建变量，并动态绑定给子组件
• 子组件使用props 来接收变量值，并进行显示绑定，可在接受传值的时候，规定传值的类型

子组件如何获取父组件整个对象：

1. 父组件中绑定 :parent="this"   在子组件中获取this.$parent
2. 在子组件中通过props获取parent（类似于父组件给子组件传值，子组件通过props获取父组件传的值）

App.vue组件

<template>
  <div id="app">
    <div class="par_b">
      <p>{{msg}}</p>
      <home :title="toHome" :parent="this" :bool="isshow" :tofun="getchild"></home>
      <list></list>
    
    </div>
  </div>
</template>

<script>
import Home from "./Components/Home.vue";
import List from "./Components/List.vue";
export default {
  name: "app",
  components: {
    "home": Home,
    "list":List
  },
  data() {
    return {
      msg: "我是根组件",
      toHome:"测试父组件和子组件传值",
      isshow:true
    };
  },
  methods:{
    getchild(){
      console.log(1);
    },
  }
};
</script>

<style lang="scss">
#app {
  div.par_b {
    width: 300px;
    height: 500px;
    border: 2px solid black;
    margin: 0 auto;
    p {
      text-align: center;
    }
  }
}
</style>

Home.vue组件

<template>
  <div id="home">
    <p>{{msg}}</p>
    <p>{{title}}</p>
    <p>{{bool}}</p>
  </div>
</template>
<script>
export default {
 //子组件获取父组件
  props: ["title", "bool", "tofun"，"parent"],
 
  // props:{
  //     'title':String,  字符串
  //     'tobool':Boolean,    boolean
  //     'tofun':Function     函数方法
  // },

  mounted() {
    this.tofun();

    //子组件里面可以直接获取父组件
    console.log(this.$parent);
    console.log(this.$parent.isshow);

    })
   
  },
  data() {
    return {
      msg: "我是home组件",

    };
  },
  }
};
</script>

二、子组件给父组件传值

• 问：父组件如何获取子组件
• 答： ref设置子组件虚拟节点 通过虚拟dom节点获取整个子组件对象$refs
• 问：父组件如何使用子组件里面的方法和属性
• 答：可在父组件里获取子组件的整个对象以后，利用“对象.属性”和“对象.方法”进行使用

<template>
  <div id="app">
    <div class="par_b">
      <p>{{msg}}</p>
      <!-- 
     父组件如何使用子组件里面的方法和属性  ref设置子组件虚拟节点    通过虚拟dom节点获取整个子组件对象$refs
      -->
      <home ref="homedata" :title="toHome" :bool="isshow" :tofun="getchild"></home>
      <button @click="getchildmsg">获取子组件的方法属性</button>
      <list></list>
    
    </div>
  </div>
</template>

<script>
import Home from "./Components/Home.vue";
import List from "./Components/List.vue";
export default {
  name: "app",
  components: {
    "home": Home,
    "list":List
  },
  data() {
    return {
      msg: "我是根组件",
      toHome:"测试父组件和子组件传值",
      isshow:true
    };
  },
  methods:{
    getchild(){
      console.log(1);
    },
    getchildmsg(){
        //通过虚拟dom节点获取整个子组件对象
        let homelist=this.$refs.homedata;
         console.log(homelist.msg);  //我是home组件
    }
  }
};
</script>

<style lang="scss">
#app {
  div.par_b {
    width: 300px;
    height: 500px;
    border: 2px solid black;
    margin: 0 auto;
    p {
      text-align: center;
    }
  }
}
</style>

三、非父组件之间的传值

不建议使用子父间的传值，使用vue里面的全局广播，即事件的监听

• 要做广播，需建一个全局文件（在src里新建一个名为Emit的文件夹，在该文件夹里新建一个名为Emit.js的文件）;
• 在Emit.js里实例化vue对象；

//实例化vue对象
import Vue from 'vue';
let emit=new Vue();
export default emit;

注：整个vue环境里就一个new vue，这个new vue就是进行全局广播;

• 在哪里广播，在哪导入vue的全局对象；

import Emit from '../Emit/Emit.js';

注：广播和接收广播都需导入vue全局对象

• 触发广播 Emit.$emit("事件名称",传送的数据);

List.vue给Home.vue组件传值，在List.vue中触发广播

<template>
  <div id="list">
      <p>{{msg}}</p>
        <!-- 
            list组件给home组件传值  广播  （非父之间传值）
        -->
        <button @click="sendhome">给home组件传值</button>
  </div>
</template>
<script>
//导入全局vue对象
import Emit from '../Emit/Emit.js';
export default {
  name: "list",
  data(){
      return {
          msg:"我是list组件",
          tohome:"接受广播",
      }
  },
  methods:{
      sendhome(){
         //触发广播
         Emit.$emit("tohomedata",this.tohome);
      }
  }
};
</script>
<style lang='scss'>
</style>

Home.vue组件-接收数据

• 在mounted生命周期中，接收广播       Emit.$on("事件名称",传送的数据);

<template>
  <div id="home">
    <p>{{msg}}</p>
    <p>{{title}}</p>
    <p>{{bool}}</p>
    <p>{{listData}}</p>
  </div>
</template>
<script>
import Emit from '../Emit/Emit.js';
export default {
   
  //子组件获取父组件
  // props:{
  //     'title':String,  字符串
  //     'tobool':Boolean,    boolean
  //     'tofun':Function     函数方法
  // },

  mounted() {
    this.tofun();

    //子组件里面可以直接获取父组件
    console.log(this.$parent);
    console.log(this.$parent.isshow);
    //接受非父组件之间的广播传值  监听tohomedata
    Emit.$on("tohomedata",(res)=>{
      this.listData=res;
    })
   
  },
  data() {
    return {
      msg: "我是home组件",
      listData:null,    //传来的值需打印上去进行绑定 
    };
  },
  }
};
</script>