父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit)
之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧~~
实际上挺简单:
父组件:
<template> <div> <my-child abcClick="sayHello"></my-child> </div> </template> <script> export default { method: { sayHello(Num,Str) { alert('hello world~~' + Num + Str) } } } </script>
子组件:
<template> <div> <!--例如最简单的封装一个按钮--> <button @click="childClick"></button> </div> </template> <script> export default { data: { return{ myNum: 456, myStr: 'haha' } }, method: { childClick() { this.$emit('abcClick', this.myNum, this.myStr) } } } </script>
核心就是通过$emit来触发自定义事件(不需要注册),并且传值出去