vue 父子间组件传值

1.父组件向子组件传值：

　　实例截图：

　　　　

　　实例代码：

/*子组件代码*/     //child.vue
<template>
  <div style="border: 1px solid red;margin: 10px;">
  	<h2>子组件</h2>
    <p>{{name}}</p>
  </div>
</template>

<script>
export default {
	props:{
		name:{
			//类型 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）引用类型：数组（Array）、对象（Object）
			/*其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。*/
			type:String,
			require:true,
			default: "",  //默认值
			validator: function (value) {   //验证器
	        	return value;
	      	}
		},

	},
  data () {
    return {
      val:this.name
    }
  },
  mounted(){
  	console.log(this.name);
  	console.log(this.val);
  },
}
</script>

　　

/*父组件代码*/
<template>
  <div class="hello">
  	<h1>父组件</h1>
  	<input v-model="msg">
    <Child :name="msg"></Child>
  </div>
</template>
<script>
	import Child from "@/components/child"
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
  	Child
  },
}
</script>

　

　2.子组件向父组件传值：

　　　　实例截图：

　　　　　　

　　　　实例代码：

　　　　

/*子组件*/
<template>
	<div style="border: 1px solid red;margin: 10px;">
		<h2>子组件</h2>
		<p>{{val}}</p>
		<button @click="sendMsg">向父传值</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				val: "aaaaaa"
			}
		},
		methods:{
			sendMsg(){
				this.$emit("listen",this.val);
			},
		},
	}
</script>

　　

/*父组件*/
<template>
  <div class="hello">
  	<h1>父组件</h1>
  	<input v-model="msg">
    <child  @listen="show"></child>
  </div>
</template>
<script>
import child from "@/components/child1"
export default {
	components:{
	child
},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
  	show(val){
  		this.msg=val;
  	},
  },
}
</script>

　　

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了（引至：https://www.cnblogs.com/daiwenru/p/6694530.html）