vue @click 传值_vue中组件通信的方式

我看了网上的博客，觉得不是特别详细，我也说说组件通信的方式，分别是父传子、子传父、兄弟传值！

父传子：

父组件App.vue中定义一个自定义属性title，然后在子组件中用props进行接收，最后用{{ title }}渲染页面

父组件App.vue代码：

<template>

<div id="app">

<big :title="msg"></big>

<smal></smal>

</div>

</template>

<script>

import Big from './components/Big'

import Smal from './components/Small'

export default {

name: 'App',

data() {

return {

msg:'吴刚'

}

},

components:{

Big,

Smal

},

}

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

</style>

子组件Big.vue代码:

<template>

<div>

big{{ title }}

<button>传值</button>

</div>

</template>

<script>

export default {

data() {

return {

msg:'吴与卿'

};

},

props:{

title:{

type:String, //检测类型

default :"岳秀清" //默认值

}

},

created() {

},

mounted() {

},

};

</script>

<style scoped>

</style>

吴刚是从父组件传递到子组件的值

子传父：

在子组件Big.vue中定义一个方法btn，用this.$emit给父组件App传值(第一个参数是自定义方法，第二个参数是要传递的值)，父组件App.vue中用自定义的方法aaa接收子组件传过来的值（ res=this.msg）

子组件Big.vue代码：

<template>

<div>

big{{ title }}

<button @click="btn">传值</button>

</div>

</template>

<script>

export default {

data() {

return {

msg:'吴与卿'

};

},

props:{

title:{

type:String,

default :"岳秀清"

}

},

created() {

},

mounted() {

},

methods: {

btn(){

console.log(8)

this.$emit('aaa',this.msg)

}

}

};

</script>

<style scoped>

</style>

父组件App.vue代码：

<template>

<div id="app">

<big @aaa="btn"></big>

<smal></smal>

</div>

</template>

<script>

import Big from './components/Big'

import Smal from './components/Small'

export default {

name: 'App',

data() {

return {

msg:'吴刚'

}

},

components:{

Big,

Smal

},

methods: {

btn(res){

console.log(3)

console.log(res)

}

},

}

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

</style>

吴与卿是从自组件传递到父组件的值

兄弟组件传值：

创建一个第三方js文件，然后在Big.vue中引入这个第三方文件，在组件中第一一个方法btn，方法中用$emit("自定义方法"，"传递的值")进行传值，之后在Small.vue中引入第三方js文件，组件中用$on("自定义方法"，()=>{})接收值

第三方bus.js文件代码：

import Vue from 'vue'

export default new Vue({

})

Big.vue代码：

<template>

<div>

big{{ title }}

<button @click="btn">传值</button>

</div>

</template>

<script>

//引入第三方文件

import bus from './bus'

console.log(bus)

export default {

data() {

return {

msg:'吴与卿'

};

},

created() {

},

mounted() {

},

methods: {

btn(){

bus.$emit('chuanzhi',{

name : "韩美珍"

})

}

}

};

</script>

<style scoped>

</style>

Small.vue代码：

<template>

<div>

small

{{ msg }}

</div>

</template>

<script>

import bus from './bus'

// console.log(bus)

export default {

data() {

return {

};

},

created() {

bus.$on('chuanzhi',(res)=>{

console.log(res)

this.msg = res.name

})

},

mounted() {

},

methods: {

},

};

</script>

<style scoped>

</style>

韩美珍是Big组件传递到Small组件的值