vue教程4：自定义组件的使用
生活随笔
收集整理的這篇文章主要介紹了
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屬性接收數據
效果：
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為例，增加個文本，顯示當前點擊的是哪個按鈕。
- show-text：自定義事件名
- $event：接收子組件外傳的參數值，固定就是$event
- $emit：用來觸發事件，第一個參數是觸發的事件名，第二個參數是需要拋出的數據，父組件通過 $event接收
總結
以上是生活随笔為你收集整理的vue教程4：自定义组件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot操作Kafka创建T
- 下一篇： Linux安装Redis完整步骤