Vue组件子传父参数的方法总结 ,兄弟组件传参方法，emit /update / .sync用法

1- $emit

在子组件中，给input添加了bind，并调用一个method：getValue

<div class="register">
	<input id="register-ipt" type="text" placeholder="请输入您的手机号" @input="getValue">
	<router-link to="/register" tag="button">注册</router-link>
	<span>已有账号？<router-link to='/login'>登录</router-link></span>
</div>

在子组件的js部分，

data() {
	return {
		numMessage:{
			ipt_value:'',
			state:false
		}
	};
},
methods:{
	getValue(){
		//getValue监听了input的输入事件。每次输入的时候都向父组件进行传参
		let ipt_value = document.getElementById('register-ipt').value
		this.numMessage.ipt_value = ipt_value
		this.$emit('getNumber',this.numMessage) 
		//通过$emit发送数据(参数一：父组件中接收参数的v-on名字，参数二：子组件中要发送的数据)
	}
},

---

父组件部分的代码
这里我用的是一个路由跳转。你可以按需更换tag类型

<router-view  @getNumber="showNum"  :message="message"> </router-view>

methods:{	
	showNum(obj){
	//这里的obj就是从子组件传来的对象。
	//注意。这里的方法名字 跟html中v-on绑定的方法名字一致
		this.message.num = obj.ipt_value
		this.message.state = obj.state
	}
}

2- .sync , $emit 和update配合的具体用法

主要用于父子组件的数据双向绑定。
ps. 可以去掉注释，复制到编译器里自己试一下
父组件中的代码如下

`template部分`
<template>
	<div>
		<child :name.sync="name"></child>  
			`这里用了子组件`;
			`v-bind后的名字name和双引号中的name必须一直，否则无法实现监听`
		<button @click="alertName">点击</button>
		<button @click="changeName">改变</button>
	</div>
</template>
`JavaScript部分`
<script>
import child from "./Child";  `引入子组件`
	export default {
		components: {
			child
		},
		data() {
			return {
				name: "xiaoming" ， 
				`父组件在这里定义了name的初始值,并且通过上面的:name.sync="name"把父组件中name的值传到子组件中`
			};
		},
		methods: {
			alertName() {
				alert(this.name);
				`alert父组件中的name值`
				console.log("这里是父组件 ： " + this.name);
			},
			changeName() {
				this.name = "123";
				`改变父组件中的name值`
			}
		}
	};
</script>

子组件的代码如下：

<template>
	<div>
		<input :value="name" @input="handleInput" type="text" />
		`:value="name" 设置了输入框的value值`
	</div>
</template>
<script>
	export default {
		props: {  
			`这里接收了父组件传来的值name，并设置为字符串 / 必须传的条件`
			name: {
				type: String,
				required: true
			}
		},
		methods: {
			handleInput(e) {
				`这里监听了input的输入事件`
				console.log(e.target.value);
				`你可以尝试在input中输入字符，看看控制台的变化`
				this.$emit("update:name", e.target.value);
				`这里把input中输入的value传给了父组件，并赋值给name`
				`因此，你在input中输入新的内容后，父组件中alert的内容才会跟着变化`
			}
		}
	};
</script>

$parent

用来从一个子组件访问父组件的实例
可以代替将数据以 prop 的方式传入子组件的方式

provide & inject

在父组件中通过provide注入一些属性 / 方法 ，在子组件，孙子组件，曾孙子组件中都可以使用