85 lines
2.0 KiB
HTML
85 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<buttoa_app :h_title="title" @send-data="fatherClick" :gethell="eeep"></buttoa_app><!--接受参数并赋值给h_title-->
|
|
<cappe @texcount="zhongzhuan">
|
|
<div class="chaz">123123123123104</div>
|
|
</cappe>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
<script>
|
|
var minx ={
|
|
data(){
|
|
return{
|
|
page:1,
|
|
totalpage:0
|
|
}
|
|
}
|
|
}
|
|
Vue.component('buttoa_app',{//全局组件注册
|
|
props: {
|
|
h_title:{
|
|
type:String,
|
|
default:"默认类型"
|
|
},
|
|
gethell:{
|
|
type:String,
|
|
default:""
|
|
}
|
|
},//定义接口接受
|
|
template: '<h2 @click="test">{{count}}{{h_title}}{{gethell}}</h2>',
|
|
data() {
|
|
return {
|
|
count: "这是全局组件",
|
|
children:"子组件"
|
|
}
|
|
},
|
|
methods: {
|
|
test() {
|
|
this.$emit('send-data',this.children)
|
|
}
|
|
}
|
|
});
|
|
var cappe={//局部组件注册
|
|
template: `<div><h1>{{count}}</h1>
|
|
<button @click="fasong">123123</button>
|
|
<slot></slot>
|
|
</div>`,
|
|
data() {
|
|
return {
|
|
count: "这是局部组件"
|
|
}
|
|
},
|
|
methods:{
|
|
fasong(){
|
|
this.$emit("texcount",this.count)
|
|
}
|
|
}
|
|
}
|
|
new Vue({
|
|
el:".app",
|
|
data:{
|
|
title:"hahaha",//定义数据
|
|
eeep:''
|
|
},
|
|
methods:{
|
|
fatherClick(res){
|
|
console.log(res)
|
|
},
|
|
zhongzhuan(res){
|
|
this.eeep=res
|
|
}
|
|
},
|
|
components:{
|
|
cappe
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</html> |