click传值vue_vue 三种传值方法

话不多说,直接撰写

第一种:父传子

父:

父组件: (v-model双向绑定)

import child from './child'

export default {

components: { child },

data () {

return {

val: ''

}

}

}

子组件

子组件: {{inputName}}

export default {

// 接受父组件的值

props: {

inputName: String,

required: true

}

}

子传父

子:

子组件: {{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

}

}

}

非父子间传值

(tip:需通过新定义个vue实例去传值通过bus.js文件,该文件是你自己新建的文件,随你放在那里,但之后需要引用,这个文件也可以用于兄弟间传值,简单的解释就是该文件相当于是一个中转站,它就是中间做处理的,用来传递和接收的)

首先介绍下bus创建

let Hub = new Vue(); //一个新的vue实例,事件中心

下面为具体操作方法

触发传递参数

xuanFn: function(a){

var that = this;

Hub.$emit('name',a);//Hub触发事件

},

接收参数事件

created() {

Hub.$on('name', (msg) => { //Hub接收事件

this.xuanname= msg;

});

}

最后,各位大佬们动动你们发财的小手,赞一下,谢谢啦