Vue 组件使用的细节点
2019-01-02 本文已影响8人
puxiaotaoc
1、is标签的使用；
2、子组件中的data必须定义为一个函数；
3、使用$refs来获取dom结点；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
// 在不和H5冲突的情况下使用is标签解决组件内的bug，否则tbody中无法包含template中的tr和td
// 在子组件里面不能直接定义对象，只能通过函数返回对象，这样多个子组件就不会互相影响了
// 因为子组件的数据可能会被多个地方使用而不像根组件只需要一次
Vue.component('row', {
data: function() {
return {
content: 'this is content'
}
},
template: '<tr><td>{{content}}</td></tr>'
})
var vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<counter ref='one' @change="handleChange"></counter>
<counter ref='two' @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
// 使用$refs来获取dom节点
Vue.component('counter', {
template: '<div @click="handleClick">{{number}}</div>',
data: function() {
return {
number: 0
}
},
methods: {
handleClick: function() {
this.number++
this.$emit('change')
}
}
})
var vm = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
handleChange: function() {
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})
</script>
</body>
</html>
