vue 父组件调用子组件方法简单例子（笔记）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../JS/vue.js"></script>
<body>
<!--父亲组件-->
<div id="app">
<cpn ref="aa"></cpn>
    <button @click="abc"></button>
</div>
<!--父亲组件-->

<!--组件-->
<template id="cpn">
<div >
<!--    上面的div一定要加的一定要有个父级元素才能显示-->

</div>

</template>
<!--组件-->

<script>
    //父传子使用props
    const cpn={
        template:"#cpn",
        methods:{
            showit(){
                alert("hahah");
            }
        },
        data(){
            return{
                name: 'hahahha'
            }


        }


    }

    const app =new Vue({
        el:"#app", //挂载那个元素
        components:{
            cpn
        },
        methods:{
            abc()
            {
                console.log(this.$refs.aa.showit());
            }
        }

    })

</script>
</body>

</html>