Writing a single JS component using Vuejs

1. Citation method

When we use Vue for common page development without using technologies such as webpack, the definition component can only be developed with a single JS file

Then refer to it as normal reference JS file

    <src= ".. /content/plugins/selecticon/selecticon.js "></script>

2. Component Definitions

The HTML content of the component can be loaded using script templates, strings, Ajax request fetching, and so on, in order to keep the component reference simple, we compress a piece of HTML into a row defined as a variable.

varhtml = ' <modal v-model= ' isshow "title=" select Icon "@on-ok=" OK "@on-cancel=" Cancel "><i-form style=" Height:300px;o Verflow-y:scroll "></i-form></modal>";//RegisterVue.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"); //Add Tag$ ("p[data-v-4ed37512]"). Removeattr ("Data-flag")); $("P", $ ( This). attr ("Data-flag",true);            }); $(". Icons-item"). On ("DblClick",function () {                varIcon = $ ("P", $ ( This) . Text (). Trim (); $("#txtSelectIcon"). val (icon); _this. $emit (' MyEvent ', ' 0 ');        });    }); }, methods: {OK:function () {            varIcon = $ ("P[data-flag")). Text (). Trim (); $("#txtSelectIcon"). val (icon);  This. $emit (' myevent ', ' 0 '); }, Cancel:function() { This. $emit (' myevent ', ' 0 '); }    }})

3. Parent page Use

    <DivID= "Selecticonmodal">        <keep-alive>            <icon-componentV-bind:isshow= "Isshow"@myevent= "Closeicon"></icon-component>        </keep-alive>    </Div>

var New Vue ({    "#SelectICONModal",    data: {        false    },    methods: {        Closeicon () {            thisfalse;        }}    );

4. Page Pass Value

Our page pass value is passed in two ways

Parent pages pass values like sub-pages using props

<!--parent Page--
<v-bind:isshow= "Isshow" ...

Component definition
Vue.component (' Icon-component ', {    props: [' isshow '],...

Child pages pass values like parent pages using $EMIT to trigger defined events

<!--parent Page--
<v-bind:isshow= "Isshow"  @myevent= "Closeicon"></  icon-component>

When the parent page initializes the component, the method is defined
Methods: {        Closeicon () {            this.isshow = False;        }    }

Component triggering
this. $emit (' myevent ', ' 0 ');

Writing a single JS component using Vuejs