VUE常用的三种传值方式
1.父传子
2.子传父
3.非父子传值
父子之间的传值
在vue.js中,父子组件之间的关系可以理解为props down(父传子props) events up(子传父用事件),如图所以:
想要搞明白父传子,必须了解prop:
什么是prop:
Prop是用来传递数据的一种自定义属性。
Prop是单向数据流。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
1.父传子:
首先你得建立两个 vue组件,假定一个是father,另一个是child
在father组件里写:
在child组件里写:
把子组件引进到父组件里面
记住,引进来之后就注册,在父组件里面注册
然后开始绑定数据, 父组件里data写name(name是自定义的)
data数据里的name,要和上面child自定义标签传递的值要对应上
最后在子组件里面用 props 方法承接你要传给子组件的数据
在上面的模板中运用传递来的参数
到这里父传子的通信已经写完了,下面附上整个代码:
父组件整体的代码:
子组件的整体代码
2. 子传父
子传父需要用事件来传值
首先我们就在子组件里面添加点击事件
然后我们在父组件里用 v-on 来接手子组件传递的值,v-on可简写成@
接着在父组件的下面的methods方法里写:
写到这里子传父就实现,但有的同学会发现父传子就不能实现了,这时我们可以用 watch 来监听,
在父组件里监听子组件里传递过来的值:
此时父子组件的通信就完成了,子传父还是父传子都可以了。
下面附上子传父的完整代码
子组件里的完整代码:
父组件里的完整代码:
3.非父子之间传值(兄弟传值)
非父子之间的传值要有一个公共的父组件,非父子之间的传值就要在这个公共的父组件里面实现传值。 非父子之间的传值还要一个公共的仓库文件(bus.js)
首先创建一个bus.js的文件,
在bus.js里面写:
在公共的父组件里导入两个兄弟组件并注册:
先导入:
在注册:
千万不要忘了还要自定义这两个兄弟组件标签(自定义标签在template>div中)
最后再附上两个兄弟组件里面的完整代码:
brother1
brother2
以上三种vue之间的通信方式就写完了。