Vue3.0之使用context和父子组件传值
Vue3.0之使用context和父子组件传值在 Vue3.0 中,setup 中可以有两个参数 第一个参数就是 props 第二个参数就是 contextcontext 解释context.parent === this.parentcontext.root===thiscontext.emit===this.parentcontext.root === thiscontext.emit ===
Vue3.0之使用context和父子组件传值
在 Vue3.0 中,setup 中可以有两个参数 第一个参数就是 props 第二个参数就是 context
context 解释
context.parent === this. p a r e n t c o n t e x t . r o o t = = = t h i s c o n t e x t . e m i t = = = t h i s . parent context.root === this context.emit === this. parentcontext.root===thiscontext.emit===this.emit
context.refs === this.$refs
context.slots === this.slots
在 context 里面可以选择 attrs,slots,emit
export default {
setup(props, context) {
// Attributes (Non-reactive object)
console.log(context.attrs)
// Slots (Non-reactive object)
console.log(context.slots)
// Emit Events (Method)
console.log(context.emit)
},
}
实例-在 context 使用 emit
1、子组件 利用 emit 发射出去
H1.vue
<template>
<div>
<div>{{name}}</div>
<div>{{message}}</div>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
props: { name: String },
setup(props, context) {
const { name } = toRefs(props)
let message = name.value + '今天天气不错'
//把数据发送走
context.emit('fashe', message)
return {
message,
}
},
}
</script>
<style lang="less" scoped></style>
2、父组件监听-必须要把监听的函数暴露出去
index.vue
<template>
<div>
<span>{{count}}</span>
<span>{{double}}</span>
<div @click="changecount">点击增加</div>
<HComponent :name="data2" @fashe="shoudao"></HComponent>
<div>{{data3}}</div>
</div>
</template>
<script>
import { ref, computed, reactive, toRefs, onMounted, watch } from 'vue' //ref接收一个参数 返回一个响应式对象 //computed是一个函数接收一个参数是函数
import HComponent from './H1.vue'
export default {
components: {
HComponent,
},
setup() {
onMounted(() => {
console.log('存在了')
})
const data = reactive({
count: 0,
double: computed(() => {
return data.count * 2
}),
changecount: () => {
data.count++
},
})
let data2 = ref('哈哈,')
let data3 = ref('接收的数据是:')
watch(data2, (newval, oldval) => {
console.log(data2)
console.log(newval)
console.log(oldval)
})
function shoudao(content) {
data3.value = data3.value + content
console.log(data3)
}
const result = toRefs(data)
return {
...result,
data2,
data3,
shoudao,
}
},
}
</script>
<style lang="less" scoped></style>
更多推荐
所有评论(0)