vue组件中的通信父传子，子传父

目录

1、父传子

2、子传父

---

1、父传子

1.父组件内，在自组件标签上，写属性

2.子组件内，通过props属性接收

1、通过自定义属性向子组件传递数据

父组件：在其引入的子组件标签内，设置自定义属性

<main-comp  :money="money" :a="true" @updateMoney="fn"/>

父组件的数据

export default(){
    data(){
		return{
    money:100
		}
    }

}

子组件

2：子组件通过props来接收

在子组件内的某个标签内容用{{属性名}}接受，相当于data中的数据，props接收用数组，属性名不止一个，逗号隔开

template里

 <p>接受父组件传递来的数据{{ money }}-{{ typeof a }}</p>

export default {
    //2子组件通过props来接收
props: [ ' money']
}

2、子传父

1.子组件内，通过：$emit('自定义事件'， 参数1，参数2)

参数1，参数2是要传递给父组件的

2.父组件内，子组件标签上， ：@自定义事件名=‘函数式’

子组件里的某个元素，设置事件，调用子组件里的函数，来触发父组件中的方法

 <button @click="give">子传父</button>

子组件标签绑定单击事件触发父组件的方法

子组件中的方法通过$emit( ‘ 父组件自定义的事件名’，子组件中data中的数据（根据需求）)

export default{
    data(){
		return{
   son_money:100
		}
    },
        props: [ ' money']，
        methods:{
give(){
    //触发自定义事件
    this. $emit( ' updateMoney ' , this.son_money)
	}
        }

}

父

在子组件绑定自定义事件（绑定的是父亲的函数）

父组件：在其引入的子组件标签内，设置自定义属性，自定义事件=‘methods中的方法

<main-comp :money="money" :a="true" @updateMoney="fn"/>

export default{
    data(){
		return{
    money:100
		}
    }，
    methods:{
		fn(){
   			 fn (money) {
     				 this.money = money
   			 }
    
		}
    }

}