app.vue文件
<template>
<div class="head">
<shall-low></shall-low>
</div>
</template>
<script>
import shallLow from './view/shanllow'
export default{
name: "App",
components:{shallLow},
}
</script>
shanllow文件
<template>
<div>
<span @click="state">点击了吗</span>
</div>
</template>
<script>
import { shallowReactive } from "vue";
export default {
name:"shanllow",
setup() {
const obj = shallowReactive({a:1,b:{c:2}});
function state(){
console.log(obj);
}
return(obj,state);
},
data() {
return {};
},
};
</script>
练习vue3,import 进来的shallLow组件不显示,只有当改变shallLow组件里的界面内容才会显示,一旦刷新界面就又不显示了
setup方法返回的是一个对象,应该写为:
setup() {
const obj = shallowReactive({a:1,b:{c:2}});
function state(){
console.log(obj);
}
return{
obj,
state
}
},
看看代码里又没类似于v-if或者v-show或者css display:none之类的
只有当改变shallLow组件里的界面内容才会显示
这句话的意思不太明白。
如果组件都不显示,如何去改变组件界面内容呢