父子组件通信方法之props /$emit

标题父子组件通信方法之props /$emit

父组件：父组件向子组件传递数据

   <templte>
   	<MyList :list="list"/>
   </templte>
   data(){
   	return {
   		list: []
   	}
   }

子组件MyList：接收父组件数据

<templte>
	
</templte>
<scripy>
export default {
    props: {
    	list: Arrsy
    }
}
</scripy>

子组件MyInput：子组件向父组件传值

通过$emit方式向父组件触发一个事件，并带入值

<templte>
	<MyList :list="list"/>
</templte>
<scripy>
export default {
    data(){
        return {
            title:''
        }
    },
    methods: {
        add()
        {
            this.$emit('add', this.title)
        }
    }
}
</scripy>

父组件： 接收子组件数据

父组件监听add事件

<templte>
	<MyInput />
</templte>
<scripy>
export default {
    data(){
        return {
            title:''
        }
    },
    methods: {
        add(title)
        {
            title就是接收到的参数
        }
    }
}
</scripy>