Vue组件传值(父组件使用属性传递给子组件、子组件通过自定义事件传递给父组件、同级组件通过共享状态)
我们在开发中，会自定义大量的组件，我们应该如何在两个组件之间进行“值”的传递呢？
父子组件传值
我们使用上一文中App.vue和HelloComp.vue组件来举例
首先我们还是需要在APP.vue中引入HelloComp.vue
<template>
<div id="app">
<hello-comp></hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父组件"
}
}
}
<style>
</style> 这样一来，关系就成为了
父组件是APP.vue,子组件是HelloComp.vue
父组件向子组件传值（属性）
使用 属性 进行传递
我们想将App.vue中的message通过HelloComp组件显示出来，应该怎么办呢？
- 首先在App.vue中的HelloComp标签自定义一个属性
<Hello-comp :msg="message"></Hello-comp> - HelloComp组件如何获取呢？
需要在HelloComp.vue中的export default中写上如下，这样子组件就拿到了父组件的数据
<script>
export default {
props:['msg'] //父级定义的属性
}
</script> 一下是父组件向子组件传递数据的完整代码示例：
App.vue
<template>
<div id="app">
<Hello-comp :msg="message"></Hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父组件"
}
}
}
</script>
<style>
</style> HelloComp.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
props:['msg'] //父级定义的属性
}
</script>
<style>
</style> 页面呈现效果：
子级向父级传递数据（使用自定义事件）
通过 自定义事件 进行传递
需求：子组件中有一个按钮，当我们点击按钮时，将子组件中的数据传递给父组件，然后在父组件中展示子组件传递过来的数据简单的说：子组件不能直接改变父组建的值，只能通过调用父组件的自定义事件间接改
- 在App.vue组件中的HelloComp标签，绑定一个自定义事件
myevent就是我们自定义的事件名称，changeData为methods中定义的事件
<Hello-comp @myevent="changData" :msg="message"></Hello-comp>- 父组件App.vue中，设置一个childDate变量，先给他赋空值，一会儿我们从子集里面取数据
<template>
<div id="app">
<h1>{{childData}}</h1>
<Hello-comp @myevent="changDate" :msg="message"></Hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父组件",
childData:""
}
},
methods: {
changDate() {
}
}
}
</script>
<style>
</style>
- 现在我们来操作HelloComp.vue子组件，我们在子组件里面写一个button，定义一个点击事件
<button @click="sendData">传递数据</button>- 然后我们在子组件的data中，定义一个数据，
export default {
props:['msg'], //父级定义的属性
data ()
{
return {
childData: "I'm Child"
}
},
- 现在我们如何将childData传送给父组件呢？需要使用 this.$emit ("父级的方法名",子级要传的参)方法
methods: {
sendData() {
this.$emit("myevent",this.childData) //emit方法就可以触发父级组件的方法
}
} -最后，我们在父组件的methods定义的changDate方法中，就可以取到子组件传过来的childData，我们在父组件中使用 this.childData=childData来将父组件中的变量复制，这时父组件中就获得了子组件的值
methods: {
changData(childData) {
this.childData = childData
}
}
- 最后，我们就可以在父组件中显示出来
<h1>{{childData}}</h1>
以下是在父组件中，点击按钮后，就收到子组件的值并显示出来
完整代码：App.vue
<template>
<div id="app">
<h1>{{childData}}</h1>
<Hello-comp @myevent="changData" :msg="message"></Hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父组件",
childData:""
}
},
methods: {
changData(childData) { //获取到的数据为，childData
this.childData = childData
}
}
}
</script>
<style>
</style> HelloComp.vue
<template>
<div>
<h1>{{msg}}</h1>
<button @click="sendData">传递数据</button>
</div>
</template>
<script>
export default {
props:['msg'], //父级定义的属性
data ()
{
return {
childData: "I'm Child"
}
},
methods: {
sendData() {
this.$emit("myevent",this.childData) //emit方法就可以触发父级组件的方法
}
}
}
</script>
<style>
</style> 非父子集传递数据
定义一个共享数据状态 来进行兄弟组件之间的“值”的传递
我们创建一个了两个组件 Brother.vue、Sister.vue,他们两个是同级的关系，都被引入了App.vue中使用，同时创建一个store.js文件来共享数据状态
- 首先，我们创建好组件，并在App.vue中进行引用和注册
<template>
<div id="app">
<BrotherCon></BrotherCon>
<SisterCon></SisterCon>
</div>
</template>
<script>
import BrotherCon from "@/components/BrotherCon.vue"
import SisterCon from "@/components/SisterCon.vue"
export default {
components:{
BrotherCon,
SisterCon
},
data() {
return{
}
}
}
</script>
<style>
</style> - 创建store.js
export default {
//状态
state: {
message:"hello vue"
},
setStateMessage(str) {
this.state.message = str
}
} - 在Brother.vue、Sister.vue引用store.js文件，就可以直接获取数据了
Brother.vue
<div>
<h1>Brother</h1>
<!-- 这里的state其实就是下面data中的store.state -->
<p>{{state.message}}</p>
</div>
</template>
<script>
import store from "../store"
export default {
data() {
return {
state:store.state
}
}
}
</script>
Sister.vue <template>
<div>
<h1>Sister</h1>
<!-- 这里的state其实就是下面data中的store.state -->
<p>{{state.message}}</p>
</div>
</template>
<script>
import store from "../store"
export default {
data() {
return {
state:store.state
}
}
}
</script>
在App.vue中引用并注册 <template>
<div id="app">
<BrotherCon></BrotherCon>
<SisterCon></SisterCon>
</div>
</template>
<script>
import BrotherCon from "@/components/BrotherCon.vue"
import SisterCon from "@/components/SisterCon.vue"
export default {
components:{
BrotherCon,
SisterCon
},
data() {
return{
}
}
}
</script>
<style>
</style> 结果展示
- 传递事件，比如在Brother中点击一个按钮，就可以改变sister中的数据
我们在Brother添加一个按钮，并定义事件，点击后改变他们共享的store中的state.message中的值
<template>
<div>
<h1>Brother</h1>
<!-- 这里的state其实就是下面data中的store.state -->
<p>{{state.message}}</p>
<button @click="changDate">改变数据</button>
</div>
</template>
<script>
import store from "../store"
export default {
data() {
return {
state:store.state
}
},
methods: {
changeDate(){
store.setStateMessage("brother data") //这里的store值得就是我们引入的那个
}
}
}
</script>
展示效果: