vue3 setup里的一些简单用法

这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 这里咱们就简单说一下

vue3和vue2 一样都有render函数 但是有所区别 主要是vue3可以把render 解构出来 大家可以看下区别

vue2 简单事例 在对象里添加render属性 参数是 h 就是render context是相当像下文可以获取属性如props

export default  {
    render(h,context) {
            return h('h1',{} , ["你啊好"])
        }
}

vue3 就比较简单一点

import { ref, h} from 'vue' // 直接在vue总解构出 h(就是render函数)
export default  {

  setup() {
    let cont = ref(0)
    return ()=>h("div",[cont.value]) // 在setup里直接返回就可以了 就可以不用写当先组件的 html模版了
  }
}

父子组件传值的问题 简单的

父组件使用

<test :title="title"></test> 

子组件使用

<template>
  <div>
    {{title}}
  </div>
</template>

<script>
export default {
    props: { // 定义 子组件的传递的属性
        title: String
    },
   setup(props){ // 这里需要说一下 我们不能在 setup里进行结构 结构的话 会让属性 失去双向数据绑定效果    
   let { title } = props // 这样解构 也会把双向数据绑定 去掉
     // 所以我们在处理的时候 不要对父组件传过来的数据 进行结构
     console.log(props.title)
   }
   
   setup( { title } ) { // 不能这样用
      
   }
}
</script>

就父子组件之间通信来说 vue3和vue2 其实差别并不大，vue3就是有一些 小地方需要仔细一点，还有一点通信的参数，还是不能在子组件更改的，这个和vue2是一样的

setup还有第两个就是context上下文

// emits 需要
emits: ['dddd'], // 需要写一下 不然会警告
setup(props,context) {
 // context里有 emit，slots，attrs，按照官方意思是slots，attrs都是经过代理的，不是原始值，虽然代理但是它的值一直都是最新的
还有一个就是context他是可以解构的既可以在函数传参数时解构，又可以在使用过程当中结构
如
let { emit,slotss, attrs }  = context

// attrs 和vue2的attrs 差不多 子组件没有定义的传递属性 通过attrs传递过来 请看下面图片
emit 的使用 也是和vue2 一样 vue3 变成了 context.emit('dddd',参数)
}

我们下次继续