[JavaScript知识库]Vue子组件向父组件传值

方法一：通过在父组件定义一个函数通过props传给子组件，子组件中传值调用这个函数。

 <MyHeader :addList='addList'/>

 methods:{
  addList(value){
    console.log(value);
    this.todolist.unshift(value)
}},
props:['addList'],

methods:{
    add(e){
        
        if(!e.target.value.trim()) return alert('输入不能为空')
        
        const addValue ={id:nanoid(),name:e.target.value,done:false}
       
        this.addList(addValue)
        e.target.value=''

    }
}

方法二：自定义事件
在父组件中的子组件内定义自定义事件

 <!-- 自定义事件实现子组件往父组件传值 -->

<Athletes @hins="getAthletes" />  

getAthletes(name){
  console.log('接受子组件的值为',name);
}
//在子组件中通过this.$emit('hins',this.name)
<button @click="transToFather">往父组件传值</button>
 transToFather(){
            this.$emit('hins',this.person)
        }