三分钟学习Vue 2. Vue父子组件间的通信上一讲我们讲到了组件的定义和使用，以及如果对代码拆分，使其封装成组件，这一

父子组件间的通信

上一讲我们讲到了组件的定义和使用，以及如果对代码拆分，使其封装成组件，这一讲我们来进行父子组件的通信。
一个父组件可以包含多个子组件。类似下图

我们在开发的过程中会涉及到父子组件间的通信

如何将父组件的值传递给子组件

父组件将值传递给子组件是通过props参数进行传递的。子组件先声明props参数，让然后父组件对props的参数进行赋值即可

如何将子组件的值传递给父组件

子组件的值传递给父组件是通过事件触发机制来传递的。子组件抛出自定义事件，然后父组件捕获子组件的自定义事件，然后父组件获得自定义事件的参数值，即可

父组件的值传递给子组件案例

效果展示如下↓↓↓↓↓↓

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>父子组件之间的通信->父向子传信息</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
        <Father></Father>
	</div>	
</body>

	
	<script>
        const Son = {
            template: `
             <div>
                子组件接收到的内容： {{sonContent}}
             </div>
            `,
            data(){
                return {
                }
            },
            props:['sonContent']
        }
     
        const Father = {
            template: `
                <div>
                    父组件的内容: <input @input="handleInput"></input>
                    <Son :sonContent="fatherContent"> </Son>
                </div>
            `,
            data(){
                return {
                    fatherContent: ""
                }
            },
            methods:{
                handleInput(e){
                    console.log(e.target.value)
                    this.fatherContent = e.target.value
                }
            },
            components: {
                Son
            }
        }
		new Vue({
			el: "#app",
			components:{
				Father
			}
		})
	</script>
	
</html>

子组件的值传递给父组件案例

效果展示如下↓↓↓↓↓↓

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>父子组件之间的通信->子向父传信息</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
        <Father></Father>
	</div>	
</body>
	
	<script>
        const Son = {
            template: `
             <div>
                子组件发送的内容： <input @input="handleInput"></input>
             </div>
            `,
            methods: {
                handleInput(e){
                    this.$emit('listernSon', e.target.value)
                }
            }
        }
     
        const Father = {
            template: `
                <div>
                    父组件接收内容:{{fatherContent}} 
                    <Son @listernSon="inputListen"></Son>
                </div>
            `,
            data(){
                return {
                    fatherContent: ""
                }
            },
            methods:{
                inputListen(value){
                    this.fatherContent = value
                }
            },
            components: {
                Son
            }
        }
		new Vue({
			el: "#app",
			components:{
				Father
			}
		})
	</script>
	
</html>