组件之间传值(父子组件、非父子组件)
一、父子组件之间传值
1.父向子传值
(1).父组件
父组件里需引用子组件,并传值给子组件,代码如下:
<template>
<div>
<span>哈哈哈哈</span>
<span style="display: block;">{{ title}}</span>
<son v-bind:msg="msg"></son> -------------利用v-bind传值给子组件
</div>
</template>
<script>
import son from '@/views/son.vue' ---------引用子组件
export default{
components:{ ---------注册子组件
son,
},
data(){
return {
msg:"这是向儿子传递的数据",
title:"这是父亲自己的内容"
}
},
}
</script>`
(2).子组件
子组件里需接收父组件传来的值,代码如下:
<template>
<div>
<span style="color: red;display:block ;">{{title}}</span>
<span>父亲传过来的内容:<i>{{msg}}</i></span>
</div>
</template>
<script>
export default {
props: [
"msg", ---------------用props接收父组件传来的值
],
data() {
return {
title: "这是儿子自己的内容"
}
}
}
</script>
2.子向父传值
(1).父组件
父组件里需引用子组件,并在父组件中定义更改值的方法,代码如下:
<template>
<div style="border: 1px solid #ccc;">
<div style="border: 1px solid green;width: 200px;height: 200px;margin-bottom: 50px;" >
<span>哈哈哈哈</span>
<span style="display: block;">{{ title}}</span>
<span style="color: #1F7199;">{{ sonvalue }}</span>
</div>
<!-- 第一个函数名等于子组件中emit中的方法名,第二个函数名等于父组件自己的函数名 -->
<son @sendSonValue="getSonValue" ></son>
</div>
</template>
<script>
import son from '@/views/son.vue'
export default{
components:{
son,
},
data(){
return {
msg:"这是向儿子传递的数据",
title:"这是父亲自己的内容",
sonvalue:""
}
},
methods:{
// 父组件中改变值的方法
getSonValue(data){
this.sonvalue = data
console.log(this.sonvalue)
}
}
}
</script>
(2).子组件
子组件里需调用父组件中更改值的方法并给父组件传值,代码如下:
<template>
<div>
<input type="button" @click="sendValue" value="给父组件传值">
<span style="color: red;">{{title }}</span>
</div>
</template>
<script>
export default {
props: [
"msg",
],
data() {
return {
title: "我是子组件向父组件传的值"
}
},
methods:{
sendValue(){
//
const self = this
// -------函数值等于父组件中@后面的函数 ---要传的值
// 子组件中调用父组件中更改值的方法,并把值传给父组件
self.$emit('sendSonValue',this.title)
}
}
}
</script>
传值之前:
传值之后:
3.父组件调用子组件的方法
(1).父组件
父组件里需引用子组件,并在父组件的方法中调用子组件的方法,代码如下:
<template>
<div style="border: 1px solid #ccc; width: 500px;margin: auto;">
<button @click="fatherMethod">点击按钮调用子组件的方法</button>
<!-- 子组件需要定义ref属性 -->
<son ref="child" ></son>
</div>
</template>
<script>
import son from '@/views/son.vue'
export default{
components:{
son,
},
data(){
return {
msg:"这是向儿子传递的数据",
title:"这是父亲自己的内容",
sonvalue:""
}
},
methods:{
fatherMethod(){
// 父组件调用子组件的方法
this.$refs.child.sonMethod();
}
}
}
</script>
(2).子组件
子组件中只需要定义自己的方法即可,代码如下:
<template>
<div>
<span style="color: red;">{{title }}</span>
</div>
</template>
<script>
export default {
props: [
"msg",
],
data() {
return {
title: "我是子组件向父组件传的值"
}
},
methods:{
sonMethod(){
console.log("我是子组件的方法")
this.title="woshizizujian"
}
}
}
</script>
调用之前:
调用之后:
二.非父子组件之间传值
目前网上有两种方式:bus总线传值和vuex定义全局变量
1.bus总线
new Vue({
el:"#app",
render:h=>app,
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线
}
})
//传递事件
this.$bus.$emit("sendStudentName","99")
//接收事件
this.$bus.$on("sendStudentName",data=>{
console.log("我是其他组件,接收了值",data)
}))
//组件销毁前把事件销毁
beforeDestroy(){
this.$bus.$off("sendStudentName")
}