使用Vuejs编写单js组件

Posted 2020-10-19 小聪.Net

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