- 使用 is 属性解决模板标签出现的 bug
<div id="app">
<table>
<tbody>
<!-- 直接使用 -->
<!-- <row></row> -->
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row', {
template: "<tr><td>this is row</td></tr>"
})
var vm = new Vue({
el: "#app",
})
</script>
这时，页面显示也是正常的，但是定义的组件出现在 table 标签外，原因是规定 tbody 标签内必须是 tr 标签，所以这里不认 自定义组件的 row 标签。解决方法是使用 is 属性，在 tbody 标签内还是用 tr 标签，但是添加 is 属性，如： <tr is="row"></tr> 。这样的标签还有 ul 、 ol 、 select 。
- 在子组件中定义 data 时，必须是一个函数，不能是对象
// 错误写法
Vue.component('row', {
data: {
content: "this is row"
},
template: "<tr><td>{{content}}</td></tr>"
})
这时页面会报错，原因就是子组件中 data 必须是函数：
// 正确写法
Vue.component('row', {
data: function(){
return {
content: "this is row"
}
},
template: "<tr><td>{{content}}</td></tr>"
})
- vue 中的 ref
- 当 ref 写在如 div 标签内时，通过
this.$refs.name获取到的是标签对应的 dom 元素
<div id="app">
<div ref="hello"
@click="handleClick">
hello word
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
handleClick: function(){
console.log(this.$refs.hello)
}
},
})
</script>
- 当 ref 写在组件内时，通过
this.$refs.name获取到的是子组件的引用
<div id="app">
父组件监听子组件向外触发的 watch 事件，父组件执行 count 方法
<counter ref="count1" @watch="count"></counter>
<counter ref="count2" @watch="count"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component("counter", {
data: function() { // 对应细节1，子组件中 data 必须是函数
return {
num: 0
}
},
template: "<div @click='add'>{{num}}</div>", // 子组件添加点击事件
methods: {
add: function(){
this.num++
this.$emit("watch") // 子组件触发父组件的 watch 事件
}
}
})
var vm = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
count: function(){
this.total = this.$refs.count1.num + this.$refs.count2.num
}
},
})
</script>
这里 this.$refs.count1 就是子组件 counter 的引用
