Vue3.0之使用context和父子组件传值

Vue3.0之使用context和父子组件传值

在 Vue3.0 中，setup 中可以有两个参数 第一个参数就是 props 第二个参数就是 context

context 解释

context.parent === 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>