2022-11-24

`

//父级
 <template>
  <div>
    <child ref='childRef' />
    <button @click="getName">获取子组件中的数据</button>
  </div>
    <h4>我是父级</h4>
    <h3>屏幕尺寸</h3>
  <div>宽度：{{ width }}</div>
  <div>高度：{{ height }}</div>

  <HelloWorld :msg="msg" :list="list"  @changeMsg="changeMsg"  ref='childRef' />
</template>


<script setup lang="ts">


import useWindowResize from './hooks/hooks'
import { ref ,reactive} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const childRef = ref<InstanceType<typeof HelloWorld>>()

  const getName = () => {
  // 获取子组件name
  console.log(childRef.value!.name)
  // 执行子组件方法
  childRef.value?.changeName()
  // 获取修改后的name
  console.log(childRef.value!.name)
}



const { width, height } = useWindowResize();
const msg = ref('hello 啊，树哥')
const list = reactive<string[]>(["西班牙", '法国', '德国'])

const changeMsg = (v: string) => {
  msg.value = v
}
</script>


//子组件
<template>

  <div class="card">
    <div><p>{{name}}</p></div>
    <p>msg：{{msg}}</p>
    <p>list：{{list}}</p>
    <span v-for="(item,index) in list" :key="index">{{item}}</span>
    <button type="button">{{str}}</button>
    <h3 @click="onChange">子组件点击测试</h3>


    <div>
      
    </div>
  </div>

  
</template>

<script setup lang="ts">
import { ref ,watch} from 'vue'

defineProps<{
  msg: string,
  list: string[]
}>()



interface Person { 
  name: string 
}
interface Student extends Person { 
  grade: number 
}
const person:Student = {
  name: 'lin',
  grade: 100
}
const str = ref('彼时彼刻')



setTimeout(() => { str.value = '恰如此时此刻' }, 3000)

watch(str, (newV, oldV) => {
  console.log(newV, oldV) //恰如此时此刻 彼时彼刻
})




const emits = defineEmits(['changeMsg'])
const onChange = () => {
emits('changeMsg','黄四郎')
}

const name = ref('张麻子')
const changeName = () => {
  name.value = '县长'
}
// 将方法、变量暴露给父组件使用，父组件才可通过 ref API拿到子组件暴露的数据
defineExpose({
  name,
  changeName
})
</script>

hooks 1
import { onMounted, onUnmounted, ref } from "vue";

function useWindowResize() {
  const width = ref(0);
  const height = ref(0);
  function onResize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }
  onMounted(() => {
    window.addEventListener("resize", onResize);
    onResize();
  });
  onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });
  return {
    width,
    height
  };
}

export default useWindowResize;


hooks 2

import { Toast } from 'vant';
import { onBeforeUnmount} from 'vue'

export function useLoading() {
  let toast: any = null;

  const startLoading = () => {
    toast = Toast.loading({
      duration: 0,
      forbidClick: true,
      message: 'Loading...',
    });
  };
  const stopLoading = () => {
    toast && toast.clear();
  };

  onBeforeUnmount(stopLoading);

  return { startLoading, stopLoading };
}

//引用hooks
<template>
    <h3 class="container" @click="dosome">这是Home页</h3>
  </template>
  
  <script setup lang="ts">
import { ref ,watch,defineComponent, getCurrentInstance } from 'vue'
import { useLoading } from '../hooks/useLoading';
const { startLoading, stopLoading } = useLoading();


function dosome(){
    console.log("Home is mounted");
    startLoading();



}
  
  
  </script>

代码块