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

vue

vue教程4：自定义组件的使用

發布時間：2025/3/19 vue 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue教程4：自定义组件的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

概述

組件是一個可復用的vue實例
組件通過Vue.component（組件名稱, 配置）進行注冊
組件的data必須是返回json對象的函數，這樣組件復用時每個對象都有各自的屬性實例
通過template定義組件的組成內容

簡單Demo：

<body><div id="components-demo"><button-counter></button-counter></div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>Vue.component('button-counter',{data:function(){return {count: 0}},template:'<button v-on:click="count++">點擊了{{count}}次</button>'})new Vue({ el: '#components-demo' }) </script>

效果如下，每點擊1次自動加1：

props

HTML頁面引用的組件，可以設置各種屬性值，vue組件通過 props屬性接收數據

<body><div id="components-demo"><button-counter title="按鈕1"></button-counter><button-counter title="按鈕2"></button-counter><button-counter title="按鈕3"></button-counter></div> </body> Vue.component('button-counter',{props: ['title'], //接收title屬性template:'<button>{{title}}</button>' //使用props定義的屬性 })

效果：

props動態傳值

上面的demo是通過html寫死title傳值，實際數據可能是動態的，把上面的例子稍作修改：

<button-counter v-for="buttonText in buttonList" v-bind:title="buttonText"> </button-counter> new Vue({ el: '#components-demo',data:{buttonList:['按鈕1','按鈕2','按鈕3']} })

自定義事件

當我們需要在操作自定義組件后，引起組件外的元素變化，就需要用到自定義事件。即：父組件先聲明事件，然后子組件操作后觸發父組件事件。
需求：仍然以上面的demo為例，增加個文本，顯示當前點擊的是哪個按鈕。

<body><div id="components-demo"><p>點前點擊按鈕：{{ buttonText }}</p><my-button v-for="button in buttonList"v-bind:title="button"v-on:show-text="buttonText=$event"></my-button></div> </body>

show-text：自定義事件名
$event：接收子組件外傳的參數值，固定就是$event

$emit：用來觸發事件，第一個參數是觸發的事件名，第二個參數是需要拋出的數據，父組件通過 $event接收

總結

以上是生活随笔為你收集整理的vue教程4：自定义组件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： SpringBoot操作Kafka创建T
下一篇： Docker环境运行Vue项目