一、组合式 Api
1、简介
组合式 Api 须要有个理论应用它的中央,这个地位称为 setup。
2、组件代码构造
export default {components: { RepositoriesFilters},
props: {
user: {type: String}
},
data () {
return {test: ''}
},
computed: {},
watch: {},
methods: {},
mounted() {},
created() {}
二、setup
1、参数
setup 接管两个参数 props
和context
props
setup 函数中的第一个参数 props,props 是响应式的,每当传入新的 props,都将会被更新
export default {
props: {title: String},
setup(props) {console.log(props.title)
}
}
ps:props 是响应式的,不能应用 es6 解构赋值
如果须要构造 props 的话,能够应用 toRefs 来操作
import {toRefs} from 'vue'
export default {
props: {title: String},
setup(props) {const {title} = toRefs(props)
console.log(title.value)
}
}
context
context 是第二个参数,非响应式的,裸露三个属性
export default {setup(props, context) {// Attribute (非响应式对象)
console.log(context.attrs)
// 插槽 (非响应式对象)
console.log(context.slots)
// 触发事件 (办法)
console.log(context.emit)
}
// 解构
setup(props, {attrs,slots,emit}) {}}
拜访组件 property
setup 执行的时候,组件还未被创立,因而只能拜访 props、attrs、slots、emit
不能拜访 data、computed、methods