one.vue
<template>
<div>
<two ref="two"
:obj="objData"
:funcTest="funcTest"
@onTestEvent="onTest">
</two>
<div style="border: #1d90e6 solid 0.75px;height: 120px;margin-bottom: 5px">
<span>我是页面1 </span>
<el-button type="primary" @click="updateTwo">传值给页面2</el-button>
<div>
{{str}}
</div>
</div>
</div>
</template>
<script>
import two from './Two'
export default {
name: "One",
components: {two},
data() {
return {
objData: {default:'默认'},
str: '',
}
}, created() {
},
mounted() {
},
computed: {},
methods: {
updateTwo(v) {
this.objData = {a: 'aaaaaaaaaaaa'};
},
onTest(v) {
this.objData =v.b;
},
funcTest(v) {
this.str=v.b;
},
},
}
</script>
<style scoped>
</style>
:obj="" 传值给子组件
two.vue
<template>
<div>
<div style="border: #1d90e6 solid 0.75px;height: 120px;margin-bottom: 15px">
<span>我是页面2 </span>
<el-button type="primary" @click="updateOne">函数传值给页面1</el-button>
<div>
{{obj}}
</div>
</div>
</div>
</template>
<script>
export default {
name: "Two",
props:{
obj:{
type:Object,
default:() => {}
},
funcTest:{
type:Function,
default:()=>{}
},
},
data(){
return{
}
},
created(){
console.log("--this.obj"+JSON.stringify(this.obj))
},
methods:{
updateOne(){
this.funcTest({b:'bbbbbbb'})
},
}
}
</script>
<style scoped>
</style>
通过function类型传值给父组件