父子组件参数传递

---

一、父组件向子组件传递参数

在父组件中组测并使用子组件的时候，使用 v-bind 绑定传递的参数，子组件中使用 props 来接收父组件传递过来的参数。

父组件

代码如下（示例）：

引入、注册子组件：

// 引入子组件
import SonItem from "./SonItem .vue";
// 注册
export default {
	  data() {
	    return {};
	  },
	  components: {
	    SonItem 
	  }
  }

传递参数：

<template>
   <SonItem :index="indexValue" />
</template>

子组件

代码如下（示例）：

export default {
    name: 'SotnItem',
    // props 接收来自父组件的参数
    props: {
        // 接受父组件传递的 展示 SrlgOpticalRoutePO 数据
        index: {
            type: number,
            default: 0
        }
    },
    data() {
        return {}
      }
}

二、子组件向父组件传递参数

子组件向父组件传递参数是通过$emit()方法给父子间传递参数。

子组件

代码如下（示例）：

export default {
	data() {
    return {
      // 设置要传递的值
      test: "test",
    };
  },
	methods:{
			// 这个方法为触发触发向父组件传值的方法
	sonSubToFather() {
	      //  可以通过$emit传值给父组件,第一个参数为传值的方法，第二个参数为要传递的值
	      this.$emit("subToFather", this.test);
	    }
	}

}

父组件

通过绑定自定义方法接收参数

<!-- 在子组件标签里定义一个自定义事件，该自定义事件要与子组件$emit的第一个参数一致,双引号中的方法为自定义的处理方法-->
<template>
   <SonItem :index="indexValue" @subToFather="getSon" />
</template>

自定义处理方法

export default {
	methods: {
		getSon(test){
			// 输出 子组件传递的值
			console.log(test);
		}
	}
}

---

总结

父组件向子组件传递参数，父组件是通过使用 ’：‘ 绑定要传递的参数，子组件主要通过使用 props接收。
子组件向父组件传递参数。自住兼使用 this.$emit()传递自定义方法名和参数。父组件在应用子组件时绑定自定义的方法。