//子组件

<template>
 {{msg}}
</template>

<script setup>
import { ref } from 'vue'

let msg = ref("Child Components");
let num = ref(123);

// defineExpose无需导入，直接使用
defineExpose({
 msg,
 num
});
</script>

//父组件
<template>
 <Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from '@/components/Child.vue'

let child = ref(null);

onMounted(() => {
 console.log(child.value.msg); // Child Components
 console.log(child.value.num); // 123
})
</script>

//父组件
<template>
  <div class="wrapper">
    <Child :page="page"
           @pageFn="pageFn"
           ref="childRef"
    />
    <button @click="doSth1"> defineExpose</button>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import Child from './Child.vue'

const childRef = ref();
const page = ref(1)
const pageFn = (num) => {
  page.value += num
}

function doSth1() {
  console.log(childRef.value)
  childRef.value.doSth();
}
</script>
<style scoped>
div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

//子组件
<template>
  <!--  <p>子</p>-->
  <button @click="butFn">改变page值: {{ page }} </button>

</template>

<script setup>
// defineEmits,defineProps无需导入，直接使用
const props = defineProps({
  page: Number
}); //接收父组件传来的值
const emit = defineEmits(["pageFn"]);   //定义一个变量来接收父组件传来的方法

const butFn = () => {
  emit("pageFn", props.page)
}

function doSth() {
  console.log(333,'defineExpose');
}

defineExpose({ doSth });

// 获取父组件传递过来的数据
console.log(props.page, "parent value"); // parent value

</script>
<style scoped>
button {
  margin: 20px;
}
</style>

watch(
  source, // 必传，要侦听的数据源
  callback // 必传，侦听到变化后要执行的回调函数
  // options // 可选，一些侦听选项
)

<template>
  <div>
    <p><input type="number" v-model="count"></p>
    <p><input type="number" v-model="plusOne"></p>
  </div>
</template>

<script setup>


import {ref, computed, watchEffect, watch} from 'vue';

const count = ref(0);

//创建一个只读的计算属性 ref：
// const plusOne = computed(() => count.value + 1)

// 创建一个可写的计算属性 ref
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

//定义监听，使用同上 //...some code else
watchEffect(() => console.log(count.value, "watchEffect"));

watch(count, (val, oldval) => {
  console.log(val, oldval, "watch")
}, {immediate: true})

</script>

<style scoped>
div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

input {
  margin: 10px;
}
</style>

<template>
    <component v-bind='attrs'></component>
</template>
<srcipt setup lang='ts'>
   const attrs = useAttrs();
<script>

// 旧
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

// 新
<script setup>
  import { useAttrs, useSlots } from 'vue'

  const attrs = useAttrs()
  const slots = useSlots()
</script>

<script setup>
  const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

export default {
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}

<script>
// 普通 `<script>`, 在模块范围下执行(只执行一次)
runSideEffectOnce()

// 声明额外的选项
  export default {
    name: "MyComponent",
    inheritAttrs: false,
    customOptions: {}
  }
</script>
<script setup>
    import HelloWorld from '../components/HelloWorld.vue'
    // 在 setup() 作用域中执行 (对每个实例皆如此)
    // your code
</script>
<template>
  <div>
    <HelloWorld msg="Vue3 + TypeScript + Vite"/>
  </div>
</template>