當前位置：首頁 > 前端技术 > vue >内容正文

vue

六十、深入理解Vue组件，使用组件的三个细节点

發布時間：2024/10/8 vue 79 豆豆

生活随笔收集整理的這篇文章主要介紹了六十、深入理解Vue组件，使用组件的三个细节点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

@Author：Runsen
@Data：2020/10/16

文章目錄

is的使用
組件中的data必須是方法
ref 引用
- Vue中如何操作dom
- 實現計算器中的功能
后言

備戰前端、大四加油。下面是總結來源慕課網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>

通過子組件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>

類似還有:<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>

ref 引用

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:"<div @click='HandleDivClick'>{{number}}</div>",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: "<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>

參考資料：

慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發
https://mp.weixin.qq.com/s/F1B32HPfaIsTtjubM8rlWw

后言

每天跑步成了必須，也成了一種習慣。

我很好，但是還差點運氣
但努力的人運氣都不會太差嘛
偶爾我可能還是會有負能量爆炸的時候
我還是想不通很多事情
但不會再為了屁大點事顛三倒四
不再去預測未來，我的任務就是讓自己變得更好更棒
去迎接一輪又一輪新的面試

總結

以上是生活随笔為你收集整理的六十、深入理解Vue组件，使用组件的三个细节点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。