Vue传值(3种常用传值方法)
- 父组件传值给子组件,首先父组件发送的形式是用
bind
(用缩写:)绑定值到子组件身上。然后子组件用属性props
接收。 - 子组件传值父组件,首先是子组件发送的形式是
this.$emit
(事件名,需要发送的值),事件名:父组件on
监听的方法,父组件第一件事就是监听子组件发送过来的事件名,@
事件名=获取值的方法。获取值的方法(值)*,就这样拿到了儿子发过来的值 - 兄弟传值,两个都要引入公共
js->bus
。首先是发送者,this.$emit
(名字,值)。然后是接受者,this.$on
(“传过来的那个名字”,函数(值)),这里要注意的是接受者的这个监听事件应该是放在钩子mounted
事件内。同时注意this指向问题。(可用封装方法)
父组件向子组件进行传值:
父组件:
<template>
<div>
父组件:
<input type="text" v-model="name">
<br>
<br>
<!-- 引入子组件 -->
<child :inputName="name"&g