子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值
App.vue代码
<template> <div id="app"> <test1 :parfn="parfn"></test1> </div> </template> <script> import test1 from '@/components/test1.vue' export default { name: 'App', data () { return { msg: 'parent' } }, components: {test1}, methods: { parfn: function (a) { alert(a) } } } </script>
test1.vue代码
<template> <div>i am test1</div> </template> <script> export default { data () { return { msg: 'test1' } }, props: { parfn: { type: Function } }, created: function () { this.parfn(this.msg) } } </script>
效果图
子向父方式2:通过$parent
App.vue代码:
<template> <div id="app"> <test1></test1> </div> </template> <script> import test1 from '@/components/test1.vue' export default { name: 'App', data () { return { msg: 'parent' } }, components: {test1}, methods: { parfn: function (a) { alert(a) } } } </script>
test1.vue代码:
<template> <div>i am test1</div> </template> <script> export default { data () { return { msg: 'test1' } }, created: function () { this.$parent.parfn(this.msg) } } </script>
效果图:
子向父方式3:通过emit
App.vue代码
<template> <div id="app"> <test1 @myfn="parfn"></test1> </div> </template> <script> import test1 from '@/components/test1.vue' export default { name: 'App', data () { return { msg: 'parent' } }, components: {test1}, methods: { parfn: function (a) { alert(a) } } } </script>
test1.vue代码:
<template> <div>i am test1</div> </template> <script> export default { data () { return { msg: 'test1' } }, mounted: function () { this.$emit('myfn', this.msg) } } </script>
效果图:
父向子传值方式1:通过props
App.vue代码:
<template> <div id="app"> <test1 :msg="msg"></test1> </div> </template> <script> import test1 from '@/components/test1.vue' export default { name: 'App', data () { return { msg: 'parent' } }, components: {test1} } </script>
test1.vue代码:
<template> <div>i am test1</div> </template> <script> export default { props: ['msg'], created: function () { alert(this.msg) } } </script>
效果图:
父向子方式2:通过$children
App.vue代码:
<template> <div id="app"> <test1></test1> </div> </template> <script> import test1 from '@/components/test1.vue' export default { name: 'App', data () { return { msg: 'parent' } }, mounted: function () { this.$children[0].childfn(this.msg) }, components: {test1} }
test1.vue代码
<template> <div>i am test1</div> </template> <script> export default { methods: { childfn: function (a) { alert(a) } } } </script>
效果图:
父向子方式3:通过ref
App.vue代码:
<template> <div id="app"> <test1 ref="mychild"></test1> </div> </template> <script> import test1 from '@/components/test1.vue' export default { name: 'App', data () { return { msg: 'parent' } }, mounted: function () { this.$refs.mychild.childfn(this.msg) }, components: {test1} } </script>
test1.vue代码:
<template> <div>i am test1</div> </template> <script> export default { methods: { childfn: function (a) { alert(a) } } } </script>
效果图:
兄弟间传值方式1:通过事件车,例如App.vue组件中两个兄弟组件test1.vue传值给test2.vue
步骤1:在外部如assets下创建bus.js
// bus.js import Vue from 'vue' export default new Vue()
步骤2:组件中引入相互传值的兄弟组件,如App.vue中test1组件传值给test2组件
<!--App.vue--> <template> <div id="app"> <test1></test1> <test2></test2> </div> </template> <script> import test1 from '@/components/test1.vue' import test2 from '@/components/test2.vue' export default { name: 'App', components: {test1, test2} } </script>
步骤3:test1组件中引入bus,通过$emit发送事件
<template> <div> test1 <button @click="send">点击发送test1数据给test2</button> </div> </template> <script> import bus from '@/assets/bus' export default { data () { return { msg: 'test1数据111' } }, methods: { send: function () { bus.$emit('myfn', this.msg) } } } </script>
步骤4:test2组件中引入bus,通过$on接收事件
<template> <div> i am test2,接收过来的数据为:{{msg}} </div> </template> <script> import bus from '@/assets/bus' export default { data () { return { msg: '' } }, created: function () { bus.$on('myfn', msg => { this.msg = msg }) } } </script>
效果图:
兄弟间传值方式2:子组件传数据给父,父再传给另一个兄弟组件,例如App.vue组件中两个兄弟组件test1.vue传值给test2.vue
步骤1:test1组件中通过$emit传递数据给父组件App.vue
<template> <div> test1 <button @click="send">点击发送test1数据给test2</button> </div> </template> <script> export default { data () { return { msg: 'test1数据111' } }, methods: { send: function () { this.$emit('myfn', this.msg) } } } </script>
步骤2:父组件App.vue中,通过v-bind绑定个属性传递给另一个子组件test2.vue
<!--App.vue--> <template> <div id="app"> <test1 @myfn="getmsg"></test1> <test2 :msg="msg"></test2> </div> </template> <script> import test1 from '@/components/test1.vue' import test2 from '@/components/test2.vue' export default { name: 'App', data () { return { msg: '' } }, methods: { getmsg: function (msg) { this.msg = msg } }, components: {test1, test2} } </script>
步骤3:test2.vue组件通过props接收父组件传递过来的参数
<template> <div> i am test2,接收过来的数据为:{{msg}} </div> </template> <script> export default { props: ['msg'] } </script>
效果图: