使用Vuejs編寫單js組件
阿新 • • 發佈：2017-12-30
title dal mode log con 請求 function icons event
1.引用方式
我們使用Vue進行普通頁面開發卻不使用webpack等技術時，定義組件可以只依賴單js文件進行開發
然後像正常引用js文件那樣進行引用
<script src="../Content/plugins/selectIcon/selectIcon.js"></script>
2.組件定義
組件的html內容我們可以使用script模板、字符串、ajax請求獲取等方式進行加載，這裏為了保持組件引用簡單，我們對一段html進行壓縮成一行定義為變量。
var html = ‘<modal v-model="isshow" title="選擇圖標" @on-ok="ok" @on-cancel="cancel"><i-form style="height:300px;overflow-y:scroll"></i-form></modal>‘;// 註冊 Vue.component(‘icon-component‘, { props: [‘isshow‘], template: html, mounted: function () { var _this = this; _this.$nextTick(function () { $(".icons-item").on("click", function () { $(".icons-item").removeClass("icons-itemact"); $(this).addClass("icons-itemact"); //添加標記 $("p[data-v-4ed37512]").removeAttr("data-flag"); $("p", $(this)).attr("data-flag", true); }); $(".icons-item").on("dblclick", function () { var icon = $("p", $(this)).text().trim(); $("#txtSelectIcon").val(icon); _this.$emit(‘myevent‘, ‘0‘); }); }); }, methods: { ok: function () { var icon = $("p[data-flag]").text().trim(); $("#txtSelectIcon").val(icon); this.$emit(‘myevent‘, ‘0‘); }, cancel: function () { this.$emit(‘myevent‘, ‘0‘); } } })
3.父頁面使用
<div id="SelectICONModal"> <keep-alive> <icon-component v-bind:isshow="isShow" @myevent="CloseIcon"></icon-component> </keep-alive> </div>
var iconVueObj = new Vue({ el: "#SelectICONModal", data: { isShow: false }, methods: { CloseIcon() { this.isShow = false; } } });
4.頁面傳值
我們頁面傳值使用兩種方式進行傳遞
父頁面像子頁面傳值使用props進行傳遞
<!--父頁面-->
<icon-component v-bind:isshow="isShow" ...
//組件定義
Vue.component(‘icon-component‘, { props: [‘isshow‘],...
子頁面像父頁面傳值使用$emit觸發定義的事件
<!--父頁面-->
<icon-component v-bind:isshow="isShow" @myevent="CloseIcon"></icon-component>
//父頁面初始化組件時，定義方法
methods: {
CloseIcon() {
this.isShow = false;
}
}
//組件觸發
this.$emit(‘myevent‘, ‘0‘);
使用Vuejs編寫單js組件