Vue page parameter passing between father and son

Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )

Vue between father and son page parameters are passed are passed through the prop and emit

1) the parent page parameters are passed to sub-pages

Sub-page code:

export default {
  name: 'child',
  props: ['data', 'index']
  methods: {
    getParentParams() {
      // 使用传递的参数方式
      const vm = this;
      parentData = vm.$props.data;
      vm.$message(parentData);
    }
  }
}

Parent page code:

// 调用子页面
<child :data="父页面参数" :index="父页面参数"></child>
                

 

2) sub-page data is transmitted to the parent page

Sub-page code:

methods: {
  sendToParent(data) {
    const vm = this;
    // getChildParam 是父页面定义的方法
    vm.$emit("getChildParam", data);
  }
}

Parent page code:

methods: {
  getChildParam(data) {
    const vm = this;
    vm.$message(data);
  }
}