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‘);
