随记v3+ts问题

关于格式：

1.写法区别和传参注意问题父亲传递儿子

父组件

<butto子组件 :popUpStatus="popUpStatus" v-if="popUpStatus.show" /> //传递过去的对象
<script lang="ts">  //setup 如果不写在script标签里面的话，要export导出
import { defineComponent,ref } from 'vue'
export default defineComponent({
  components: {
//记得components 可特么别写错了
},
  setup(props, ctx){
    const popUpStatus: Interface= reactive({ 
    //这是定义的对象，传到子组件的时候必须声明一下是什么类型  这个为父组件
      show: false,
      title: '我是传过来让弹框消失'
    })
    const options = ref([
     {
        value: 'Last Week',
        name: 'Last Week',
      }
    ])
    const changePopUp=() => {
      popUpStatus.show = true
      console.log(popUpStatus.show)
    }
    return{ // 所有定义的变量和方法都要return出来
      options,
    }
  },
  methods: {
  }
})

</script>

子组件

子组件 要声明下传递过来的参数类型，用的话就直接props.popUpStatus.show
<script lang="ts">
import { defineComponent,ref } from 'vue'
export default defineComponent({
    props: {
        popUpStatus: {
        type: Object,
        default: () => {
            return {
            title: '',
            popUpStatus
            }
        }
        }
  },
    components:{
    },
    setup(props, ctx){
        const closeStatus= ref(Boolean)
        return{
            closeStatus,
        }
    },
})
</script>

2.写法区别和传参注意问题儿子传给父亲

先在子组件定义emits

<script lang="ts">
export default defineComponent({
//定义emits,emits的定义是与component、setup等这些属性是同级,里面是传递给父组件的方法
//emits此时是作为数组，它也可以接收一个对象
    emits:['callCancel'],
    props: {
  },
  setup(props, ctx){
      console.log(props)
    const radio1 = ref('Meeting')
    const headerSelect = ref([])
    const radioChange=(val)=>{
        if(headerSelect.value.length<=0){
            headerSelect.value.push(val)
            ctx.emit('callCancel',"这个里面可以写传过去的数据") //然后在方法中调用，
      //与之前的用法不同的是，现在需使用ctx.emit，其中ctx是setup中第二个参数，也就是上下文对象
            headerSelect.value=[]
        }else{
            return
        }
    }
    return {
      radio1,
    }
  }
})

 <ChooseBtnThree :optionThree="optionThree" @callCancel ="callCancel " />
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import ChooseBtn from './chooseBtn.vue'
export default defineComponent({
    props: {
        popUpStatus: {
        type: Object,
        default: () => {
            return {
            title: '',
            show:Boolean
            }
        }
        }
  },
    components:{
        ChooseBtn,
    },
    setup(props, ctx){
        const closeStatus= ref(Boolean)
        const list = ref([])
        const callCancel =(value) => { // 这个value就是子组件返回来的数据
            list.value =[...new Set(value)]
            console.log(list.value)
        }
        return{
            closeStatus,
        }
    },
})

标签：const,ts,value,popUpStatus,v3,props,ref,defineComponent,随记
来源： https://blog.csdn.net/weixin_57398205/article/details/123568650