标签：template javascrip counter count get mit ret 渲染 efs
1.子组件的is使用
2.子组件的data函数
3.ref的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .activated {color: red} </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <table> <tbody> <!-- h5规定tbody里面放tr>td,页面渲染时看起是一样的，但是dom节点渲染不一样--> <!-- ul>li, select>option --> <row></row> <row></row> <row></row> <!-- is代表是哪个组件 --> <td is="row"></td> <td is="row"></td> </tbody> </table> <ul> <li is="liRow"></li> <li is="liRow"></li> <li is="liRow"></li> </ul> <h3>ref获取dom对象</h3> <div ref="getDOM" @click="handleClick"> click me</div> <h3>组件使用ref,获取的是子组件的引用</h3> <counter ref="one" @change="handleChange"></counter> <counter ref="two" @change="handleChange"></counter> <div>{{total}}</div> </div> </body> <script type="text/javascript"> Vue.component(‘row‘, { //子组件定义数据的时候，必须是一个函数 //让每个子组件都有独立的数据存储 data () { return { content: ‘this is a row‘ } }, template:‘<tr><td>{{content}}</td></tr>‘ }) Vue.component(‘liRow‘, { template:‘<li>this is a li</li>‘ }) Vue.component(‘counter‘, { data () { return { count: 0 } }, template: ‘<div @click="handleClick">{{count}}</div>‘, methods: { handleClick () { this.count++ this.$emit(‘change‘) } } }) let vm = new Vue({ el: ‘#app‘, data: { total: 0 }, methods: { handleClick () { //$refs对象保存的是vue实例中所有的dom引用 console.log(this.$refs.getDOM.innerHTML = ‘hei jack‘) }, handleChange () { // ref用在组件上时，保存的时组件的引用 console.log(this.$refs.one) this.total = this.$refs.one.count + this.$refs.two.count } } }) </script> </html>
标签：template javascrip counter count get mit ret 渲染 efs
原文地址：https://www.cnblogs.com/JunLan/p/12420112.html
