context

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
 
    </style>

</head>
<body>
   
    <div id="root"></div>
     
    <script>  
       
        // toref-context
       var app = Vue.createApp({  
           methods:{
            handleChange(){
                alert('change')
            }
           },
            template:`  
                <child app='app' @change="handleChange">  parent   </child>  
            `
        })
 
        app.component('child',{
            template:`  
                <div @click="handleClick">child </div>    
            `,

            // mounted(){
            //     // console.log(this.$slots);
            //     this.$emit('change')
            // },

            setup(props,context){  
                const { h } = Vue;
                const {attrs,slots,emit} = context;
                // console.log(attrs.app); // none-props 属性
                // console.log(slots.default());
                // return () => h('div',{},slots.default())

                function handleClick(){
                    emit('change')
                }

                return {
                    handleClick
                }
            }
           
        })
       
        app.mount('#root')

    </script>

</body>
</html>
posted @ 2021-12-14 09:47  13522679763-任国强  阅读(40)  评论(0)    收藏  举报