【Vue】父子组件相互传值

　　刚刚学Vue的时候被父子传值弄得很迷糊，总是理不清

　　这篇文章是个人总结的父子传值，仅供参考，希望可以帮助你

　　若有错误，麻烦指出，谢谢！

 

Home为父组件，HelloWorld为子组件

• prop父组件向子组件传值

1. 父组件在components中注册子组件
2. 给子组件绑定一个属性和值
3. 在子组件用props接收父组件传过来的值，
4. 再porp中定义接受数据的类型，值，或者函数

注：

1. 组件中的所有props 中的数据，都是通过父组件传递给子组件的

2. prop是单向绑定的，当父组件的属性变化时，将传递给子组件，但是反过来不行，主要是防止子组件无意修改父组件的状态

3. 每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不能在子组件内部改变prop

4. props中的数据都是只读的，无法重新赋值

 

 

• &emit子组件向父组件传值

1. 首先通过事件click触发函数，
2. 在函数内用$emit事件监听传值给父组件并定义事件名
3. 父组件接受到相同的事件名后将函数名定义
4. 通过定义的函数将传过来的值赋值给data内的变量

注：

1. 需要使用事件绑定v-on，自定义一个事件属性，传递给子组件

2. this.$emit( event, arg )：发送数据，第一个参数是发送数据的名称，接收时还用这个参数接收，第二个参数是这个数据现在的位置