园龄：5年3个月粉丝：31 关注：1

ref 父子组件传值 ---子传父

这个ref只能进行子传父，也比较简单，调用也简单，在想获取的元素标签里加上“ref”和名字即可（ref="name"），如<div ref="box">123456</div>/<son ref="son"></son>,用this.$refs.box.innerHTML/this.$refs.son.sonMsg得到即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<div ref="box">123456</div>
		<son ref="son"></son>

		<button @click="getSonMsg">拿到子组件</button>
		<button @click="getfatMsg">子传父</button>
		<button @click='getdom'>拿到dom节点</button>
		<h3>子组件传父组件信息:{{getson}} </h3>
		</div>

	<template id="son">
		<div>
			<h2>子组件信息：{{sonMsg}}</h2>
			
		</div>
	</template>

	<script src="vue.js"></script>
	<script>
			// 子组件
			Vue.component("son",{
				template:"#son",
				data(){
					return{
						sonMsg:"我是子组件信息"
					}
				}
			})

			// 父组件
			new Vue({
				el:"#app",
				data:{
					getson:'父组件'
					// getson:''
				},
				methods:{
					getSonMsg(){
					console.log	(this.$refs.son.sonMsg)  //得到子组件信息
					},
					getfatMsg(){
						this.getson = this.$refs.son.sonMsg  //子传父 （父组件信息）
						console.log(this.getson)
					},
					getdom(){
						console.log(this.$refs.box.innerHTML)
					}

				}
				
			})
	</script>
</body>
</html>