使用Vuejs編寫單js組件

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