vue 组件相互传值

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Part.1 传值几种方式

在写项目时，遇到组件传值问题，特此记录一波~~~

(1) 父传子

(2) 子传父

(2) 兄弟组件传值

Part.2 父传子

顾名思义，就是父组件传值给子组件

子组件：

<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template><script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>

父组件：

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template><script>
import HelloWorld from "@/components/HelloWorld.vue";export default {
name: "home",
components: {
HelloWorld
}
};
</script>

效果：

Part.3 子传父

子组件传值给父组件

子组件：

<template>
<div class="hello">
<h1 @click="goFather">{{ msg }}</h1>
</div>
</template><script>
export default {
name: "HelloWorld",
data() {
return{
msg: '我是子组件的值'
}
},
methods: {
goFather() {
this.$emit('goFather', this.msg)
}
}
};
</script>

父组件：

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld @goFather="getValue"/>
<h1>{{msg}}</h1>
</div>
</template><script>
import HelloWorld from "@/components/HelloWorld.vue";export default {
name: "home",
data() {
return {
msg: '我现在没值'
}
},
methods: {
getValue(data) {
this.msg = data
}
},
components: {
HelloWorld
}
};
</script>

效果：

点击之前

点击之后

Part.3 兄弟组件传值

我把兄弟组件传值分为两种情况：

1. 通过点击事件触发

2. 窗体加载时就触发

首先创建一个供传值使用的媒介 JS 文件，例如 a.js

内容如下：

import Vue from 'vue'export default new Vue

其次，父组件如下

<template>
<div id="app">
<div id="nav"> 
<Home></Home>
<About></About> </div>
</div>
</template><script>
import Home from './views/Home'
import About from './views/About'
export default {
name: "home",
components: {
Home,
About
}
};
</script>

我们开始第一种情况：点击触发

Home 子组件：

<template>
<div class="home">
<h1 @click="goAbout">{{msg}}</h1>
</div>
</template><script>
import a from '../assets/a'
export default {
name: "home",
data() {
return {
msg: '我是兄弟组件一'
}
},
methods: {
goAbout: function() {
a.$emit('userDefinedEvent',this.msg)
}
}
};
</script>

About 子组件：

<template>
<div class="about">
<h1>{{msg}}</h1>
<h2>{{msg2}}</h2>
</div>
</template><script>
import a from '../assets/a'
export default {
name: "About",
data() {
return {
msg: '我是兄弟组件二',
msg2: '默认值'
}
},
created() {
a.$on('userDefinedEvent',(e)=>{
this.msg2 = e
})
}
};
</script>

效果：

点击之前：

点击之后

OK！再看第二种情况

Home 组件：

<template>
<div class="home">
<h1>{{msg}}</h1>
</div>
</template><script>
import a from '../assets/a'
export default {
name: "home",
data() {
return {
msg: '我是兄弟组件一'
}
},
created() {
a.$emit('userDefinedEvent',this.msg)
}
};
</script>