vue给php传值,Vue常用的三种传值方式

这篇文章给大家分享的内容是关于Vue常用的三种传值方式，有一定的参考价值，有需要的朋友可以参考一下。父组件向子组件进行传值：

父组件：

父组件:

import child from './child'

export default {

components: {

child

},

data () {

return {

name: ''

}

}

}

子组件：

子组件:

{{inputName}}

export default {

// 接受父组件的值

props: {

inputName: String,

required: true

}

}

2.子组件向父组件传值

子组件：

子组件:

{{childValue}}

export default {

data () {

return {

childValue: '我是子组件的数据'

}

},

methods: {

childClick () {

// childByValue是在父组件on监听的方法

// 第二个参数this.childValue是需要传的值

this.$emit('childByValue', this.childValue)

}

}

}

父组件：

父组件:

{{name}}

import child from './child'

export default {

components: {

child

},

data () {

return {

name: ''

}

},

methods: {

childByValue: function (childValue) {

// childValue就是子组件传过来的值

this.name = childValue

}

}

}

3.非父子组件进行传值。(非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。)

公共bus.js//bus.js

import Vue from 'vue'

export default new Vue()

组件A：

A组件:

{{elementValue}}

// 引入公共的bug，来做为中间传达的工具

import Bus from './bus.js'

export default {

data () {

return {

elementValue: 4

}

},

methods: {

elementByValue: function () {

Bus.$emit('val', this.elementValue)

}

}

}

组件B：

B组件:

{{name}}

import Bus from './bus.js'

export default {

data () {

return {

name: 0

}

},

mounted: function () {

var vm = this

// 用$on事件来接收参数

Bus.$on('val', (data) => {

console.log(data)

vm.name = data

})

},

methods: {

getData: function () {

this.name++

}

}

}

相关推荐：