<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button @click="go">点击</button>
<!-- 组件调用 li1 zhang -->
<li1 @go="go"></li1>
<zhang :name="namea"></zhang> 将父级namea通过属性name传值到组件zhang
</div>
</body>
<script>
let name = "哈哈哈"
Vue.createApp({
data(){
return{
namea:"张三"//父组件创建namea
}
},
methods: {
go(num) {
this.namea="李四"+num;
}
},
}).component("li1",{//组件可以创建多个这是组件一组件名li1
data(){
return{
count:0
}
},
"template":`<div @click="$emit('go',123)">liwi{{count}}</div>`//通过$
})
.component("zhang",{//继续创造组件二 组件名zhang
"props":["name"],//通过props 自定义属性字段可以将父级data数据传过来，给zhang组件创建一个属性name
data(){//此data和createapp中data数据不互通需要中转
return{
count:0
}
},
methods: {//此method只有组件内使用
},
"template":`<div @click="count++">zhangwi{{count}}{{name}}</div>`//在这调用属性name通过{{}}
})
.mount("#app")
</script>
</html>
网友评论