Home.vue
<template>
<el-button @click="filterFromHome()">filterFromHome</el-button>
<Test></Test>
</template>
<script>
import Test from "./Test.vue"
import useTest from "@/hooks/useTest"
import {toRefs} from "vue"
export default {
name: 'Home',
components: {Test},
setup() {
const {filterFromHome} = useTest()
return {
filterFromHome
}
}
}
</script>
<style scoped>
</style>
useTest.js
/**
* Created by baidm in 2022/3/30 on 20:13
*/
import {reactive, watch} from "vue"
export default function () {
let arr = _.map(new Array(100), (item, index) => {
return {
id: index + 1,
name: `test${index + 1}`,
}
})
const info = reactive({
list: arr,
sourceList: arr
})
watch(info, (val, oldVal) => {
info.list = val.list
console.log("useTest.js", val);
})
const filterFromHome = () => {
info.list = _.filter(info.sourceList, item => item.id <= 50)
console.log("Home.vue", info);
}
const filterInfoList = (row) => {
info.list = _.filter(info.sourceList, item => item.id <= row.id)
}
return {
info,
filterInfoList,
filterFromHome
}
}
Test.vue
<template>
<div class="test">
<p v-for="item in info.list" :key="item.id" @click="filterInfoList(item)">
name:{{item.name}}
</p>
</div>
</template>
<script>
import useTest from "@/hooks/useTest"
import {watch, toRefs} from "vue"
export default {
name: "Test",
setup() {
const {info, filterInfoList} = useTest()
watch(info, (val) => {
console.log("Test.vue", val);
})
return {
info,
filterInfoList,
}
}
}
</script>
<style scoped>
.test {
border: 1px solid #333;
}
.test p {
cursor: pointer;
}
</style>
点击按钮 filterFromHome 后,子组件模板未更新??
你的usetest是一个函数,在home和test中分别调用,生成的是两个实例,是没有关联的
hooks的一大优点qq_20454817 点就是,解决了这个数据源一致,导致数据管理乱,来源不清晰的问题。
usetest是一个函数,每次调用,都是一个新的作用域。
内部的变量属性,都是局部变量。
楼上说的对,如果想在两个不同的组件中响应的话,需要使用vuex