Vue学习 19组件之间的通信（props）

组件通信

  在开发过程中，往往需要组件之间进行数据传输，这就涉及到了组件之间的通信

父组件给子组件传递数据

  父组件给子组件传递数据的方法是：父组件通过属性传递数据，子组件通过props接受数据。props接收数据有三种书写形式。
  数据具体传输方法与接受数据的三种方式举例如下，假设父组件给子组件传递姓名与年龄。

<!-- 父组件 -->
<template>
	<div>
		<!--  -->
		<People name="Revin" :age="26"/>
	</div>
</template>
<script>
	import People from './components/People'
	export default {
		name:'App',
		components:{People}
	}
</script>
<!-- 子组件 -->
<template>
	<div>
		<h2>你叫什么：{{name}}</h2>
		<h2>你多大了：{{age}}</h2>
	</div>
</template>
<script>
	export default {
		name:'People',
		//简单声明接收
		props:['name','age'] 
		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		// props:{
		// 	name:{
		// 		type:String, //name的类型是字符串
		// 		required:true, //name是必要的
		// 	},
		// 	age:{
		// 		type:Number,
		// 		default:99 //默认值
		// 	},
		// }
	}
</script>

运行结果如下
成功获取父组件传输的name与age。

子组件给父组件传递数据

  子组件给父组件传递数据的方法与父组件给子组件传输数据的方法类似。具体过程为首先在通过父组件给子组件传输一个函数，子组件通过调用函数将数据传入父组件中。
假设还是传输姓名与年龄。只是此时数据传输方向转为子组件传向父组件。代码书写如下。

<!-- 父组件 -->
<template>
  <div>
    <!--  -->
    <People :getdata="getdata" />
    <h2>接收的数据是{{ data }}</h2>
    <h2>接收后名字为{{ name }}</h2>
    <h2>年龄为{{ age }}</h2>
  </div>
</template>

<script>
import People from "./components/People";

export default {
  name: "App",
  components: { People },
  data() {
    return {
      name: "",
      age: "",
      data: "",
    };
  },
  methods: {
    getdata(x) {
      console.log(x);
      this.data = x;
      this.name = x.name;
      this.age = x.age;
    },
  },
};
</script>

<!-- 子组件 -->
<template>
	<div>
		<button @click="givedata">给父组件传输数据</button>
	</div>
</template>
<script>
	export default {
		name:'People',
		//简单声明接收
		props:['getdata'] ,
		methods:{
			givedata(){
				this.getdata({name:'Revin',age:26})
			}
		}
	}
</script>

代码运行结果如下。
未点击按钮前，数据未传输

点击按钮后数据从子组件传入父组件。

控制台接收的输入如下

兄弟组件之间的通信

  兄弟之间有很多种办法进行通信，目前还未学到直接进行通信的方法。但目前可以通过父子组件之间传递间接实现兄弟组件之间通信。
  假设存在如下需求：将组件1的数据传入兄弟组件组件2。那么具体操作流程如下。
  首先组件1将数据传入父组件。父组件再将数据传入到组件2。通过父子组件之间的方法简介实现兄弟组件数据传输的功能。