vue父子页面间参数传递

vue父子页面间参数传递是通过prop 和 emit进行传递的

1） 父页面参数向 子页面传递

子页面代码：

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

父页面代码：

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

 

2） 子页面数据向父页面传递

子页面代码：

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

父页面代码：

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