六十、深入理解Vue组件，使用组件的三个细节点
@Author：Runsen
@Data：2020/10/16
备战前端、大四加油。下面是总结来源慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发课程使用组件的三个细节点。
is的使用
直接使用组件可能会有bug，因为h5里面可能会有固定格式
出现需求：H5标签元素中如何正确使用子组件，比如<table><tbody><tr><td></td></tr></tbody></table>
下面是通过Vue实现的H5标签元素，但是出现了tr和td不在<table><tbody>里面。
<body>
<div id="app"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table>
</div>
<script> Vue.component("row",{ // 子组件中的data必须是function函数 data() { return { content:"this is a content" } }, template:"<tr><td>{{content}}</td></tr>" }) var vm = new Vue({ el:"#app", })
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
通过子组件row去解析<tr><td> </td></tr>这部分，则会出现问题
对于上面的bug，需要使用is，既保证tr使用了row这个子组件，又符合H5的编码规范，具体解决代码如下。
<body>
<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必须是function函数 data() { return { content:"this is a content" } }, template:"<tr><td>{{content}}</td></tr>" }) var vm = new Vue({ el:"#app", })
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
类似还有:<ul><ol><li></li></ol></ul>、<section><option></option></section>
组件中的data必须是方法
在子组件定义data时传递内容必须是方法，值必须为一个函数（函数返回一个对象，对象要包含你所对应的数据），其中有两种写法，
<div id="app"> <counter></counter> <counter></counter>
</div>
<script> Vue.component("counter",{ // data() { // return { // number : 0 （这里是：） // } // }, data:function(){ return{ number : 0 //（这里是：） } }, template:"<div @click='HandleDivClick'>{{number}}</div>", methods: { HandleDivClick:function(){ this.number ++ } }, }) var vm = new Vue({ el: "#app", })
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
ref 引用
Vue中如何操作dom
出现需求：ref引用获取dom节点和dom内容 ？
解决方法：一般是如this.$refs.xxx获取dom节点，来进行dom操作，如下面代码
<body>
<div id="app"> <!-- 一般来说你要在vue里操作DOM，要先在标签里加上ref=""，如下： --> <div ref="Hello" @click="HandleDivClick">Hello world</div>
</div>
<script> // vue中如何操作dom var vm = new Vue({ el: "#app", methods: { HandleDivClick:function(){ // 打印出<div>Hello world</div> console.log(this.$refs.Hello) console.log(this.$refs.Hello.innerHTML) } } })
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
实现计算器中的功能
出现需求：制作一个计数器,并且能够点击数字就按顺序+1。
<body>
<!-- 实现计算器中的功能 -->
<div id="app"> <counter></counter> <counter></counter>
</div>
<script> Vue.component("counter",{ // data() { // return { // number : 0 // } // }, data:function(){ return{ number = 0 } }, template:"<div @click='HandleDivClick'>{{number}}</div>", methods: { HandleDivClick:function(){ this.number ++ } }, }) var vm = new Vue({ el: "#app", })
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
上面的代码只是有两个counter组件，每次点击就加一，下面添加对两个进行求和，相当于实现一个发布订阅的功能
子组件向父组件发送数据：向外界触发事件（这里用this.$emit="change"）用于告知，即在子组件定义methods使用$emit
父组件中counter组件：用于监听该触发事件，即绑定一个事件监听方法（这里@change="xxx"）
Vue实例定义methods，使用这个绑定后的方法
1、出现需求：这样一想，只需在change方法里做一个求和功能就可以实现求和
2、解决方法：使用ref引用形式
在子组件中分别在两个子组件下使用ref，在Vue实例中handleChange里计算两个子组件（this.$refs.one.number 和 this.$refs.two.number）的和，具体实现的代码如下。
<body>
<div id="app"> <counter @change="HandlerChange" ref="one"></counter> <counter @change="HandlerChange" ref="two"></counter> <div>{{total}}</div>
</div>
<script> Vue.component("counter",{ data() { return { number:0 } }, template: "<div @click='HandlerDivClick'>{{number}}</div>", methods: { HandlerDivClick:function(){ this.number ++ // 当子组件发生改变，那么就通过$emit向父组件传值 this.$emit("change") } }, }) var vm = new Vue({ el : "#app", data:{ total: 0 }, methods:{ HandlerChange:function(){ this.total = this.$refs.one.number + this.$refs.two.number } } })
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
参考资料：
- 慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
- https://mp.weixin.qq.com/s/F1B32HPfaIsTtjubM8rlWw
后言
每天跑步成了必须，也成了一种习惯。
我很好，但是还差点运气
但努力的人运气都不会太差嘛
偶尔我可能还是会有负能量爆炸的时候
我还是想不通很多事情
但不会再为了屁大点事颠三倒四
不再去预测未来，我的任务就是让自己变得更好更棒
去迎接一轮又一轮新的面试
文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。
原文链接：maoli.blog.csdn.net/article/details/109125729
- 点赞
- 收藏
- 关注作者
评论（0）