vue组件传值
场景一:父组件给子组件传值:【直接传递】
在父组件调用自组件的地方,添加一个自定义属性,属性的值就是父组件要传递给子组件的值,子组件通过props接收父组件传递过来的值,属性名在父组件里自定义的属性名。
场景二:子组件给父组件传值(父组件接收子组件的值,需要子组件事件触发才能传递)【子组件被动传递】
不推荐使用,如有场景需要子给父传值,用状态管理器会更好
子组件定义一个触发事件,里面装着this.$emit("xxx",val);
"xxx"是父组件引用子组件的地方自定义的事件名,例如:@my-event="getData"
,getDate函数定义在父组件的里面,通过getData(val){ console.log(val); }
此时的val就是子组件传递给父组件的值。
场景三:非父子之间的传值(兄弟组件)
使用中央事件总线其实就是vue的实例传播,接收数据的一方接听自定义的事件,发送方通过$emit的方式触发自定义事件,并且传递数据
不推荐使用,如有场景需要子给父传值,用状态管理器会更好
场景四:子组件直接使用父组件的事件或方法
不推荐使用,打个比方,儿子都没和爸爸打个招呼就拿钱要挨打的,还是让爸爸主动给(第一种方式传值方式推荐【父给子传值】)
通过 $parent
拿到父组件的实例,使用时候,$parent.变量
、$parent.方法
场景五:父组件直接使用子组件的数据和方法(常用)
父组件可以通过this.$ref
获取到子组件的实例,在父组件调用子组件的地方子组件处,加上ref,例如:<child ref="test"></child>
场景六:provide+reject
provide+reject主要用于开发高阶插件/组件库时候使用,普通的应用程序中不推荐