父子组件间传值，父传子，子传父

父子组件间传值，父传子，子传父

父子组件给子组件传值

       第一步：爸爸将数据递给儿子，所以我们就需要在子组件绑定父组件的数据

       第二步：爸爸都已经将数据给你了，那么你就要礼貌性的伸手去拿，这时我们可以利用props去接爸爸传过来的值

       第三步：当你拿到值的时候，就可以随意发挥数据的作用啦

代码如下：

   

父组件：
<template><div id="app"><chuanzhi :fatherdata='data'></chuanzhi>  //绑定父组件的数据</div>
</template><script>import Chuanzhi from './components/chuanzhi'export default {name: 'App',data() {return {data:'哈喽~我是父组件的数据'}},components:{Chuanzhi}
}
</script>子组件：
<template><div><p> {{ fatherdata }} </p>  //展示父组件的数据</div>
</template><script>
export default {props:{          //使用props接受父组件的数据fatherdata:{type:String   //限制拿到父组件数据的数据形式，这里为字符串型的数据}}
}
</script>

子组件给父组件传值

        第一步：给子组件绑定一个事件，利用触发事件给父组件传值，这里利用this.$emit将事件和数据传递过去

        第二步：子组件绑定好事件之后，父组件需要时刻监听着子组件的变化（使用v-on监听），一旦发生改变，就可以进行相关操作，并以此获得数据

代码：

父组件：<template><div id="app"><chuanzhi  @senddata='getdata'></chuanzhi> //监听的事件<p> {{ sondata }}</p></div>
</template><script>import Chuanzhi from './components/chuanzhi'export default {name: 'App',data() {return {sondata:''}},components:{Chuanzhi},methods: {getdata(value) {this.sondata = value  //事件一旦触发，便可将子组件的数据拿到手啦}}
}
</script>子组件：<template><div><button  @click='change'>发送子组件的数据</button> //绑定一个点击事件，一旦触发，父组                                     件便可以监听到，然后进行相关的操作</div>
</template><script>
export default {data() {return{message:'哈喽~我是子组件的数据'}},methods: {change() {this.$emit('senddata',this.message)  //使用this.$emit给父组件传递事件和参数，第一个事件，第二个是参数，第一个事件名就是父组件监听的事件名}}
}
</script>