使用组件的细节点
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
<script>
Vue.component('row', {
template: '<tr><td>This is a row</td></tr>'
})
var vm = new Vue({
el: '#app'
})
</script>
我们发现 tr 不在 tbody 里面，原因是 HTML5 规定 table 下面必须是 tbody，tbody 下面必须是 tr。
所以我们需要在 tbody 下面写 tr，但是我们可以通过 is 属性来指明模版。
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
<script>
Vue.component('row', {
template: '<tr><td>This is a row</td></tr>'
})
var vm = new Vue({
el: '#app'
})
</script>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row', {
data() {
return {
content: 'This is a row'
}
},
template: '<tr><td>{
{content}}</td></tr>'
})
var vm = new Vue({
el: '#app'
})
</script>
在子组件中定义 data 时，data 必须是一个函数，不能是一个对象。
ref 引用
我希望 div 被点击的时候，把 div 的内容打印出来。
<div id="app">
<div ref="hello" @click="handleClick">hello world</div>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
handleClick() {
console.log(this.$refs.hello.innerHTML);
}
}
})
</script>
$refs指所有引用，.hello就是 ref=“hello” 这个引用。
$ref 在组件中的使用：
「 计数器 」
<div id="app">
<counter></counter>
</div>
<script>
Vue.component('counter', {
data() {
return {
number: 0
}
},
template: '<div @click="handleClick">{
{number}}</div>',
methods: {
handleClick() {
this.number++;
}
}
})
var vm = new Vue({
el: '#app'
})
</script>
「 counter 求和 」
<body>
<div id="app">
<counter ref="one" &
最低0.47元/天 解锁文章
扫一扫
5071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
