<!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="./vue/vue.js"></script>
<script src="./vue/axios.min.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
</body>
<script>
Vue.component('son', {
template: `<div><span>{{count}}<button @click="changeCount">子+1</span><div>`,
data() {
return {
count: 0
};
},
methods: {
changeCount () {
this.count++
}
}
});
Vue.component('father', {
template: `<div><div><son></son></div><br><span>{{count}}<button @click="changeCount">父+</span><div>`,
data() {
return {
count: 0
};
},
methods: {
changeCount () {
this.count++
}
}
});
var vm = new Vue({
el: "#app"
});
</script>
</html>
父子组件简单案例
最新推荐文章于 2024-09-13 14:34:15 发布
该代码示例展示了如何在Vue.js中创建并使用组件。有两个组件,son(儿子组件)和father(父亲组件),它们都有自己的数据属性count和changeCount方法来增加计数。儿子组件显示并更新其自身的计数,而父亲组件同样有独立的计数器和按钮。当点击按钮时,各自的计数会递增,体现了组件间的独立性和数据绑定。
摘要由CSDN通过智能技术生成