Skip to main content

Vue组件之间相互传值

· 2 min read

1. 子组件往父组件传值​

  • 定义一个 中间传输者用来传输数据
  //main.js
  
  /*定义全局传送者，用来子组件往父组件传值*/
  Vue.prototype.$vm = new Vue();
  • 子组件定义方法
// methods中定义方法
closeSlideBar() {
  /* closeSlideBar: 是一个事件名，子组件
   * 定义了啥，父组件接受的时候就写啥
   * false: 这是需要传递的值
   */
  this.$vm.$emit("closeSlideBar", false);
  console.log("传值方法被调用");
}
  • 在父组件中接受
// 需要在钩子函数中定义 mounted
mounted() {
    //  closeSlideBar: 是子组件中定义的时间名
    // val: 子组件传递过来的值
    this.$vm.$on("closeSlideBar", (val) => {
        console.log('父组件接收到值');
        this.show = val;
    })
}

2. 父组件往子组件传值​

  • 在子组件中定义 props
export default {
    name: "RecordList",
    data() {
        return {
        }
    },
    // 父组件传递过来的值
    props: ['type']
}
  • 在父组件调用的时候传递
<!--此处的type就是在子组件 props 中接收的名字-->
<RecordList type="In"/>