vue组件传值，子传父，父传子

1.子传父

首先创建子组件，在其中定义一个input框，定义其数值改变事件如下

 <input type="text" v-model="value" @input="Sendout()" />

定义变量和方法

data() {
        return {
            value: ""
        };
    },
    methods: {
        Sendout() {
            console.log(this.value);
            this.$emit("Sendout", this.value);
        }
    }

文本框值改变，触发自定义事件，发送数据

创建父组件

引入子组件

qqq: () => import("@/components/qqq.vue")

在组件标签上定义自定义方法，如下

<qqq @Sendout="Receive($event)"></qqq>

 创建相对应的函数

Receive(param) {
            console.log(param);
        },

 此处的param变量即为子组件的值

2.父传子

 在父组件中，直接对使用的子组件标签进行绑定自定义属性，如下

 <qqq @Sendout="Receive($event)" :name="'name'"></qqq>

此处name属性可动态绑定

在子组件中

声明props属性

 props: ["name"],

 然后子组件可以直接当成data函数中的变量进行使用

 3.非父子组件传值

同时引入一个js文件，一个定义事件，一个触发事件，达到传值的目的

如下，我们可以全局定义一个对象

//~ 在main.js中加入
Vue.prototype.bus = new Vue()  // 这样我们就实现了全局的事件总线对象

//~ 组件A中，监听事件
this.bus.$on('update', function(data) {
    console.log(data)  // data就是触发update事件带过来的数据
})
 
//~ 组件B中，触发事件
this.bus.$emit('update', data)  // data就是触发update事件要带走的数据

以上就是vue组件传值的三种方式。