练习vue3,import 进来的shallLow组件不显示

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组件里的界面内容才会显示

这句话的意思不太明白。

如果组件都不显示,如何去改变组件界面内容呢