vue零基础开发014——模板子组件中的data定义
2019-11-22 本文已影响0人
文朝明
这样赋值我们什么都得不到：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件中赋值方法</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',
{ data: {
content:"this is a row"
}，
template: "<tr><td>{{content}}</td></tr>"
}
)
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
什么都没得到
为什么呢，因为在子组件中，可能被调用多次，为了避免重复和冲突，所以data要求必须是函数。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>子组件中的data定义</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row', {
data: function () {
return {
content:'this is a row'
}
},
template: "<tr><td>{{content}}</td></tr>"
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
子组件中的data定义
