Vue3 在setup()钩子函数中调用

父组件：

<template>
	<div>
        我是父组件
        <children ref="childrenRef" />
        <button @click="handleChildren">触发子组件</button>
    </div>
</template>

<script lang="ts">
    import { ref, defineComponent } from 'vue'
    import Children from './components/Children.vue';
    export default defineComponent({
    	components: { Children }
        setup() {
            // ref的泛型除了指定any外 还可以指定<InstanceType<typeof Children>>
            const childrenRef = ref<any>();
            const handleChildren = () => childrenRef.value.isChildren();
            return {
                childrenRef,
                handleChildren
            }
        },
    })
</script>

子组件：

<template>
<div>
    我是子组件
</div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'

    export default defineComponent({
        setup() {
            const isChildren = () => {
                console.log("我是子组件");
            }
            return {
                isChildren,
            }
        }
    })
</script>

如果是在setup()钩子函数中使用，父组件通过ref获取到子组件实例后，直接.value.函数名即可调用子组件所定义的函数。其中ref的泛型可以指定any和InstanceType<typeof Children>

在<srcipt setup>中调用

父组件：

<template>
	<div>
        我是父组件
        <children ref="childrenRef" />
        <button @click="handleChildren1">触发子组件1</button>
        <button @click="handleChildren2">触发子组件2</button>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import Children from './components/Children.vue';
    const childrenRef = ref<InstanceType<typeof Children>>();
    const handleChildren1 = () => childrenRef.value?.isChildren();
    const handleChildren2 = () => childrenRef.value?.isChildren2();
</script>

子组件：

<template>
    <div>
        我是子组件
    </div>
</template>

<script setup lang="ts">
    import { defineExpose } from 'vue';
    const isChildren = () => {
        console.log("我是子组件的第一个方法");
    }
    const isChildren2 = () => {
        console.log("我是子组件的第二个方法");
    }
    defineExpose({ isChildren, isChildren2 })
</script>

在<srcipt setup>中调用和setup()钩子函数中调用不同的是：子组件中要通过defineExpose将方法暴露给父组件

vue2的三种传值方式之父传子、子传父、兄弟共享数据

1. 父传子

<!-- 父组件 -->
<template>
  <div class="app">
    <!--3. 通过属性绑定的方式将数据传进来 -->
    <son :msg="msg" :info="userinfo.name"></son>
  </div>
</template>

<script>
import son from "./components/son.vue"
export default {
  components:{
    son
  },
  //1、在父组件中定义数据
  data(){
    return{
      msg: '父组件',
      userinfo:{name:'wzt',age:20}
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div class="son">
	<!-- 4.将父组件的数据渲染到子组件中 -->
      <div>{{msg}}</div>
      <div>{{info}}</div>
  </div>
</template>

<script>
export default {
	//2.在子组件中自定义属性
    props:['msg','info']
}
</script>

2.子传父

<!-- 子组件 -->
<template>
  <div class="son">
      <div>{{count}}</div>
      <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            count:0
        }
    },
    methods:{
        add(){
            this.count += 1
            // 1.修改数据时，通过 $emit 触发自定义事件
            // $emit(被触发的事件, 传给父的数据)
            this.$emit('numChange',this.count)
        }
    }
}
</script>

<!-- 父组件 -->
<template>
  <div class="app">
    <div>{{countFromSon}}</div>
     <!-- 2.当$emit被调用就触发numChange事件 -->
    <son @numChange="getNewCount"></son>
  </div>
</template>

<script>
import son from "./components/son.vue"
export default {
  components:{
    son
  },
  data(){
    return{
      countFromSon:0
    }
  },
  methods:{
    // 3.监听事件的触发后调用函数
    getNewCount(val){
      this.countFromSon = val
    }s
  }
}
</script>

3.兄弟共享数据

<!-- 数据发送方-->
<template>
  <div class="son">
      <div>{{msg}}</div>
      <button @click="send">将msg传给son2</button>
  </div>
</template>

<script>
//4.导入EventBus.js文件
import bus from './EventBus.js'
export default {
    // 1.在son中定义数据
    data(){
        return{
            msg: 'wztxcj'
        }
    },
    methods:{
        send(){
        //5.调用send方法通过$emit触发share事件
            bus.$emit('share', this.msg)
            //两个组件用的不是同一实例所以这里不能用this.$emit
            //而bus是指向EventBus里的Vue实例对象，两个组件使用bus则就是使用同一组件
        }
    }
}
</script>

<!-- 数据接收方-->
<template>
  <div class="son2">
      <div>son传的数据是---{{msgFromSon}}</div>
  </div>
</template>

<script>
//4.导入EventBus.js文件
import bus from './EventBus.js'
export default {
    // 2.在son2中定义要存的数据
    data(){
        return{
            msgFromSon:''
        }
    },
    created(){
    //6.组件被创建就绑定share事件，将son组件的this.count传到son2的val中
        bus.$on('share',val => {
            this.msgFromSon = val
        })
    }
}
</script>

//3.创建EventBus.js文件
import Vue from 'vue'
export default new Vue()