06_setup函数细节

<template>

    <div>

        <div id="h2">child子级组件</div>

        <h3>msg:{{msg}}</h3>

        <h3>count:{{count}}</h3>

        <div id="button" @click="xxx">分发事件</div>

    </div>

</template>

<script lang="ts">

import{defineComponent} from'vue'

export default defineComponent({

    name:'Child_vue',

    props:['msg'],

    //setup 在 beforeCreate生命周期回调前调用，且仅执行一次。

   //数据初始化的生命周期回调

   //setup执行时，当前组件还未创建

    beforeCreate(){

    console.log('beforeCreate is using')

    },

    //界面渲染完毕

    // mounted(){

    //   //

    // },

    setup(props,context){

    // console.log(props.msg)//props是一个对象，里面有父级组件向子集组件传递的数据

    // console.log(context.attrs)

    // console.log(context.emit)

    console.log(context.attrs.msg2)

    console.log('+++++++++++++++++++++')

    console.log('setup is using',this)

    const showMsg1 = () => {

        console.log('setup 中的showMsg1方法')

    }

    //按钮点击事件的回调函数

    function emitXxx(){

        context.emit('xxx','++')

    }

    return{

           //setup直接返回一个对象,对象中的属性和方法均可在html中直接使用.

        }

    },

    data(){

       return{

           count:10

       }

    },

    mounted(){

        console.log(this)

    },

    methods:{

        showMsg(){

            console.log('use showMsg in methods')

        }

    }

})

</script>

<style lang="scss" scoped>

 

</style>