Vue-组件3 data和methods
一、data
注意:
- 组件中的data必须用一个函数返回,返回的数据为一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 2.调用组件-->
<com1></com1>
</div>
<script>
// 1.定义一个有data的组件
Vue.component('com1', {
template: '<h1>定义一个有data={{msg}}的组件</h1>',
data: function () {
return {
msg: 'Seven'
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
二、methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3.调用组件-->
<com1></com1>
</div>
<!-- 1.定义组件模板-->
<template id="tmp1">
<div>
<button @click="add">加1</button>
<span>count={{count}}</span>
<h1>定义一个有data={{msg}}的组件</h1>
</div>
</template>
<script>
// 2.定义一个有data和methods的组件
Vue.component('com1', {
template: '#tmp1',
data: function () {
return {
msg: 'Seven',
count: 0
}
},
methods: {
add() {
this.count += 1
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
三、组件中的data共享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 4.调用组件-->
<com1></com1>
<com1></com1>
<com1></com1>
</div>
<!-- 2.定义组件模板-->
<template id="tmp1">
<div>
<button @click="add">加1</button>
<span>count={{comdata.count}}</span>
</div>
</template>
<script>
// 1.定义一个对象
var comdata = {count: 0}
// 3.定义一个有data和methods的组件
Vue.component('com1', {
template: '#tmp1',
data: function () {
return {
comdata
}
},
methods: {
add() {
this.comdata.count++
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
更新时间:2019-12-21