|
一、父组件向子组件传值
1.父组件.vue// 父组件中<template> <div> <Child ref="child" :title="value"/> </div></template> <script>export default { data() { return { value: 'hello world!' } }}</script>
2.子组件.vue// 父组件中<template> <div> <span>{{title}}</span> </div></template> <script>export default { props: { title: { type: String, default: '' } }}</script>//title值为'hello world!
二、兄弟组件间传值还可以通过中间件Bus$emit 传值
$on 接收
$off 删除传输事件
1.A组件.jsthis.$bus.$emit("flag",true)
2.B组件.jsmounted() { this.$bus.$off('flag') this.$bus.$on('flag', data=> { this.flag= data }) }
三、子组件向父组件传值
1.父组件.js<template> <div> <Child ref="child" @getTitle="getTitle"/> </div></template> <script>import Child from './components/Child'export default { components: { Child }, data() { return { } }, method:{ getTitle(data){ console.log(data) } }}</script>打印结果为 hello xuliting
2.子组件.js<template> <div> <span>{{title}}</span> </div></template> <script>export default { data() { return { title: 'hello xuliting' } }, mounted(){ this.getFun() }, method:{ getFun(){ this.$emit("getTiltle",this.title) } }}</script>
总结：组件间也可以通过传递方法从而解决。例如父组件为A，子组件有B和C。 父组件A调用子组件B的方法定义为aFun，把aFun传递给子组件C即可
这是在父组件中的组件C进行方法传递 引用的则是在组件C，通过props props: { aFun: { type: Function, default: () => function() {} } }本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容！
下载地址:
javascript 实例详解循环用法
将Angular单项目升级为多项目的全过程 |
