当前位置：凯发k8官方网 > 前端技术 > vue >内容正文

vue

六十、深入理解vue组件，使用组件的三个细节点 -凯发k8官方网

发布时间：2024/10/8 vue 27 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了六十、深入理解vue组件，使用组件的三个细节点小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen
@data：2020/10/16

文章目录

is的使用
组件中的data必须是方法
ref 引用
- vue中如何操作dom
- 实现计算器中的功能
后言

备战前端、大四加油。下面是总结来源慕课网vue2.5->2.6->3.0 开发去哪儿网app 从零基础入门到实战项目开发课程使用组件的三个细节点。

直接使用组件可能会有bug，因为h5里面可能会有固定格式

出现需求：h5标签元素中如何正确使用子组件，比如

下面是通过vue实现的h5标签元素，但是出现了tr和td不在

里面。<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:""})var vm =newvue({el:"#app",})script> body>

通过子组件row去解析

这部分，则会出现问题

对于上面的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:""})var vm = new vue({el:"#app",})</script></body>

类似还有:

、

在子组件定义data时传递内容必须是方法，值必须为一个函数（函数返回一个对象，对象要包含你所对应的数据），其中有两种写法，

<div id="app"><counter>counter><counter>counter> div> <script>vue.component("counter",{// data() {// return {// number : 0 （这里是：）// }// },data:function(){return{number : 0 //（这里是：）}},template:"

",methods: {handledivclick:function(){this.number }},})var vm = new vue({el: "#app",})script> body>

vue中如何操作dom

出现需求：ref引用获取dom节点和dom内容？

解决方法：一般是如this.$refs.xxx获取dom节点，来进行dom操作，如下面代码

<body><div id="app"><div ref="hello" @click="handledivclick">hello world</div></div><script>// vue中如何操作domvar 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。

<body><div id="app"><counter></counter><counter></counter></div><script>vue.component("counter",{// data() {// return {// number : 0// }// },data:function(){return{number = 0}},template:"

",methods: {handledivclick:function(){this.number }},})var vm = new vue({el: "#app",})</script> </body>

上面的代码只是有两个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: "

",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>

参考资料：

慕课网vue2.5->2.6->3.0 开发去哪儿网app 从零基础入门到实战项目开发
https://mp.weixin.qq.com/s/f1b32hpfaisttjubm8rlww

每天跑步成了必须，也成了一种习惯。

我很好，但是还差点运气
但努力的人运气都不会太差嘛
偶尔我可能还是会有负能量爆炸的时候
我还是想不通很多事情
但不会再为了屁大点事颠三倒四
不再去预测未来，我的任务就是让自己变得更好更棒
去迎接一轮又一轮新的面试

总结

以上是凯发k8官方网为你收集整理的六十、深入理解vue组件，使用组件的三个细节点的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。

组件
vue