// 父組件
<template>
  <div>
    <div>
      <div>{{city}}</div>
      <button @click="changeReactive">改變r(jià)eactive</button>
      <button @click="handleFather">點(diǎn)擊父組件</button>
    </div>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</template>

<script>
import { ref, onMounted, toRefs, reactive } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup () {
    const handleBtn = (val) => {
      console.log('btn', val)
    }

    const testClick = (val) => {
      console.log('testClick', val)
    }

    const childRef = ref(null)

    const handleFather = () => {
      childRef.value.observed.a = 666 //父組件修改子組件的值
      console.log('獲取子組件的方法', childRef.value)
      // 子組件需要定義expose，如果不定義，那么需要返回，相應(yīng)的函數(shù)，一般不直接返回，如果頁(yè)面上沒(méi)有用到
      //直接通過(guò)expose（暴露）需要的方法或者值就行了
    }

    // 通過(guò)setup函數(shù)的方法寫，需要返回，頁(yè)面上用到的方法，和值
    // 如果是reactve定義的值，通過(guò)解構(gòu)的方式頁(yè)面上渲染的值不是響應(yīng)式的,需要通過(guò)toRefs轉(zhuǎn)換，然后解構(gòu)
    // ...toRefs(testReactive)
    
    const testReactive = reactive({
      city: '北京',
      age: 22
    })

    const changeReactive = () => {
      testReactive.city = '重慶'
    }

    return {
      handleBtn,
      testClick,
      handleFather,
      ...toRefs(testReactive),
      changeReactive,
      childRef
    }
  }
}
</script>


//子組件
<template>
  <div>
    {{observed.a}}
    <button @click="handleBtn">點(diǎn)擊</button>
  </div>
</template>

<script>
import { defineProps, defineEmits, defineEmit, defineExpose, reactive } from 'vue'

export default {
  props: {
    city: String
  },

  /* 設(shè)置這個(gè)主要是為了，讓ctx.attrs訪問(wèn)不到這個(gè)屬性 */
  /* props上設(shè)置了有的屬性，在attrs上，也不會(huì)顯示 */

  emits: ['testClick'],  //設(shè)置這個(gè)的目的，是為了讓attrs上沒(méi)有對(duì)應(yīng)的自定義方法，
  //子組件如果設(shè)置了peops，那么在attrs上也訪問(wèn)不到對(duì)應(yīng)的值
  //arrts在vue3中功能有所增強(qiáng)，掛載了自定義方法，和class，style
  //在vue2中自定義方法是掛載到,$listeners，在vue3中$liseners已被移除

  setup (props, ctx) {
    const { expose, emit } = ctx
    const handleBtn = () => {
      console.log('btn', ctx)
      emit('testClick', 666)
    }

    const observed = reactive({
      a: 1
    })

    function clickChild (value) {
      observed.a = value
    }

    expose({
      clickChild, //暴露自定義方法，父組件調(diào)用
      observed// 暴露子組件的值
    })

    return {
      observed,
      handleBtn
    }
  }
}
</script>

// 父組件
<template>
  <div>
    <button @click="handleFather">點(diǎn)擊父</button>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
// 這種方式寫不用在return導(dǎo)出頁(yè)面上用到的方法和值，需要用什么直接在vue上解構(gòu)出對(duì)應(yīng)的defin
const childRef = ref(null)

const handleBtn = (val) => {
  console.log('btn', val)
}

const testClick = (val) => {
  console.log('testClick', val)
}

const handleFather = () => {
  console.log('獲取子組件的方法', childRef.value)
  childRef.value.testFatherClick()  //父組件調(diào)用子組件的方法
  // 子組件通過(guò)defineExpose暴露出對(duì)應(yīng)的方法
}

</script>


// 子組件
<template>
  <div>
    <button @click="handleBtn">點(diǎn)擊</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose, reactive } from 'vue'

const props = defineProps({
  city: String
})

const emit = defineEmits(['handleBtn', 'testClick'])

const handleBtn = () => {
  // console.log('btn', props, emit)
  emit('testClick', 12)
}

const testFatherClick = () => {
  console.log('測(cè)試父組件點(diǎn)擊子組件')
}

const observed = reactive({
  a: 1
})

defineExpose({ //暴露方法給父組價(jià)
  testFatherClick,
  observed
})

</script>

<style scoped>
</style>

// 父組件
import { ref, reactive } from 'vue'
import Child from './Child.jsx'

const Father = {
  setup() {
    // 在jsx中定義的ref在頁(yè)面上使用需要通過(guò).value去訪問(wèn)
    const city = ref('北京')

    const changeCity = () => {
      city.value = '杭州'
    }

    const childRef = ref(null)

    const handelFather = (add) => {
      //也是通過(guò)在組件暴露expose方法
      // city.value = '杭州'
      console.log('childRef', childRef.value)
    }

    const testChildClick = (val) => {
      console.log('測(cè)試子組件點(diǎn)擊', val)
    }

    return () => {
      return (
        <div>
          <div>{city.value}</div>
          <button onClick={changeCity}>改變城市</button>
          <button onClick={handelFather}>點(diǎn)擊父</button>
          <Child testChildClick={testChildClick} ref={childRef} />
        </div>
      )
    }
  }
}

export default Father


//子組件
import { ref, reactive } from 'vue'

const Child = {
  props: {
    testChildClick: Function
  },

  setup(props, { emit, expose }) {
    const { testChildClick } = props
    const testFatherClick = () => {
      console.log('測(cè)試父組件點(diǎn)擊子組件')
    }

    const handelBtn = () => {
      // emit('testChildClick') //在jsx中這種方式不行
      // console.log('props', props)
      testChildClick('返回值給父組件')
      // 只能通過(guò)這種方法，這也相當(dāng)于react，相當(dāng)于傳遞一個(gè)函數(shù)給子組件，子組件把值，通過(guò)函數(shù)傳給父組件
    }

    expose({
      testFatherClick
    })

    return () => {
      return (
        <div>
          <button onClick={handelBtn}>子組件傳值給父組件</button>
        </div>
      )
    }
  }
}

export default Child