vue 父页面调用子页面方法 返回数据_vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法...

一.父子传值

父组件引入子组件并注册

在标签通过动态绑定data里的值

子组件通过props接收父组件传递过来的参数

主动获取值

父组件里注册的子组件标签里写上ref

在mounted声明周期函数里打印this.$refs.name.msg即可

效果图

// 父组件

import fatherSon from './components/father_son'

export default {

components: {

fatherSon

},

data() {

return {

num: 6

}

},

methods: {

go() {

alert('this is father')

}

},

mounted() {

console.log(this.$refs.name.msg)

}

}

// 子组件

点我

{{ num }}

export default {

props: ['num' ,'go'],

data() {

return {

msg: '子组件'

}

},

}

button {

display: inline-block;

width: 90px;

height: 60px;

font-size: 30px;

line-height: 30px;

margin-right: 20px;

}

p {

font-size: 30px;

}

二.子父传值

子组件通过自定义事件,以$emit给父组件传送一个事件

父组件通过子组件传送过来的事件去写方法

主动获取值

子组件在mounted声明周期函数中通过this.$parent.msg即可

效果图

// 子组件

+

-

{{ num }}

export default {

props: ['num' ,'go'],

methods: {

add() {

this.$emit('addNum')

},

del() {

this.$emit('delNum')

}

},

mounted() {

console.log(this.$parent.msg)

},

data() {

return {

}

},

}

button {

display: inline-block;

width: 90px;

height: 60px;

font-size: 30px;

line-height: 30px;

margin-right: 20px;

}

p {

font-size: 30px;

}

// 父组件

import fatherSon from './components/father_son'

export default {

components: {

fatherSon

},

data() {

return {

num: 6,

msg: '父组件'

}

},

methods: {

add() {

this.num--

},

del() {

this.num++

}

},

}

兄弟组件传值

新建一个js文件作为仓库

两个兄弟组件都引入这个js文件

brother组件通过VueEvent.$emit(‘toSister’, this.msg)传数据,第一参数是数据名,第二个是参数是要传递的数据

sister组件通过 VueEvent.$on(‘toSister’, function(data) {})接收数据,第一个参数是数据名,第二个参数是函数,data就是brother传递过来的数据

效果图

// 父组件

import brother from './components/brother'

import sister from './components/sister'

export default {

components: {

brother,

sister

},

data() {

return {

}

},

methods: {

},

}

// brother组件

brother组件

传值

import VueEvent from '../VueEvent'

export default {

methods: {

go() {

VueEvent.$emit('toSister', this.msg)

}

},

data() {

return {

msg: 'brother组件的msg'

}

},

}

div {

width: 100px;

height: 30px;

line-height: 30px;

text-align: center;

}

// sister组件

sister组件

import VueEvent from '../VueEvent'

export default {

mounted() {

VueEvent.$on('toSister', function(data) {

this.msg = data

console.log(this.msg)

})

},

data() {

return {

msg: 'sister组件'

}

},

}

div {

width: 100px;

height: 30px;

line-height: 30px;

text-align: center;

background-color: red;

}

本文地址：https://blog.csdn.net/weixin_45045593/article/details/107581000

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！