<!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>
