<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<component :is="'counter'"></component>
<component :is="'counter'"></component>
<component :is="'counter'"></component>
<com1 v-bind:parentmsg="msg"></com1>
<com2 v-on:func="show"></com2>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{ count }}</h3>
</div>
</template>
<template id="tmp2">
<div>
这是子组件2
<input type="button" value="父方法" @click="myclick">
</div>
</template>
<script>
var dataObj = { count: 0 }
var com2 = {
template: "#tmp2",
data() {
return {
msg : '123',
}
},
methods: {
myclick() {
this.$emit('func', this.msg)
}
}
}
Vue.component('counter', {
template: '#tmpl',
data: function () {
// return dataObj;
return {
count:0
}
},
methods: {
increment() {
this.count++
}
}
})
new Vue({
el: '#app',
data: {
msg: '父组件中的值'
},
methods: {
show( data ) {
console.log('父组件中的方法---' + data);
}
},
components: {
com2,
com1:{
data() {
return {
title: '123'
}
},
template: "<h1>这是子组件--- {{ parentmsg }}<h1>",
props: ['parentmsg'],
methods: {
}
}
}
})
</script>
</body>
</html>```
vue(七)组件
最新推荐文章于 2024-05-21 10:17:20 发布