Vue3.0学习二

组合式API：setup 在beforecreate之前就执行了。

import { ref, toRefs, toRef , h} from 'vue'

export default {

　　props:{

　　　　name: { type: String }

　　//setup中使用props中的数据

　　setup(props, context){

　　　　//props

　　　　console.log(props.name)

　　　　//在setup中获取props的值且运用

　　　　//const { 需要解构的属性 }

　　　　const { name } = props //这样写不是响应式的要通过toRefs, 引用数据可以这样写

　　　　const { name } = toRefs(props)

　　　　//如果name是可选的prop，则传入的props中没有name。就要用toRef

　　　　const { name } = toRef(props, 'name ')

　　　　//context

　　　　console.log(context.attrs.id) //abc, 相当于$attrs获取和返回属性值

　　　　context.emit( '自定义方法名称'，value ) //相当于this.$emit

　　　　//如果return是 return（）=> h('div', '133') 这时候这个组件只显示return出来的,组件的方法和属性，可以通过context.expose({ })暴露出去。

　　　　//子组件

　　　　const counter = ref(20)

　　　　function changeCounter(){

　　　　　　counter.value++

　　　　}

　　　　context.expose({ counter, changeCounter })

　　　　//父组件

　　　　let son = ref()

　　　　console.log(son.value.counter)

　　　　//父组件调用子直接的方法

　　　　son.value.changeCounter()

　　　　return { }

　}

父组件

<div>

</div>

__EOF__

本文作者：小兔
本文链接：https://www.cnblogs.com/g-14/p/17215118.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！