vue如何寫組件（script標籤引入的方式）

不少人知道.vue結構的單文件組件形式，不過這種單文件組件的結構若是要加入到現有的jquery項目中就比較麻煩了，那若是咱們又想用vue來寫模板，又不想引入vue-cli管理，那該怎麼來寫組件呢？彆着急往下看！

1.首先在正常使用cdn引入jquery的項目中，也用script標籤引入Vue.js文件。

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>

2.爲了方便測試咱們在頁面中寫個按鈕，這個按鈕的做用就是要展現jquery和vue同時正確使用並不互相沖突。

    <input id="btn" type="button" value="jquery操做">

3.下面進入正題，咱們來定義咱們的vue組件。

Vue.component("card",{
    props:{//這裏是組件能夠接受的參數，也就是至關於面向原型寫組件時的配置參數，用戶能夠傳遞不一樣參數，本身定義組件
        cardTitle:{//卡片標題
            type:String,
            default:'這是一個卡片'
        },
        list:{//列表內容
            type:Array,
            default:[]
        }
    },
    template:`
        <div class="modal">
            <div class="modal-header">
                <h4>{{cardTitle}}</h4>
            </div>
            <div class="modal-content">
                <div>
                    <slot name="modal-content">能夠擴展的卡片內容</slot>
                    <ul>
                        <li v-for="(item,index) in list">{{item}}</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <slot name="modal-footer">
                    <input class="btn blue" type="button" value="ok" @click="okHandle" />
                    <input class="btn" type="button" value="cancel" @click="cancelHandle" />
                </slot>
                
            </div>
        </div>
    `,
    methods:{//這裏定義的組件的方法，利用$emit()進行父子組件通訊，子組件經過點擊事件告訴父組件觸發一個自定義事件，$emit()方法第二個參數也能夠用來傳遞數據
        okHandle(){
            this.$emit("ok");
        },
        cancelHandle(){
            this.$emit('cancel')
        }
    }
});

 ps：代碼中有slot的地方是分發內容的定製模板，slot爲modal-content 定製提醒信息模板，slot爲modal-footer 定製底部模板。你能夠在父頁面進行卡片樣式的更改和功能的增減。定義好的這個組件在父頁面中也要以script標籤的形式引入進來，固然你也能夠直接定義在父頁面中，這個按照你本身的需求和邏輯來寫。

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="./modal.js"></script>

4.父頁面調用這個組件，最外層必須是vue的實例id爲app的div元素包裹才行。

    <div id="app">
        <div>
            <card :list="list" @ok="okMethods" @cancel="cancelMethods"></card>
        </div>
    </div>

ps：使用jquery點擊按鈕觸發一個dom操做的事件與vue實例對象中的組件之間並無任何衝突，不過這裏要注意的是，jquery的代碼儘可能不要寫在vue實例的方法methods中，防止出現Bug，另外在htm的書寫過程當中，全部關於jquey的dom操做都最好也應該寫在id爲app的vue實例區域的外面，這樣才能避免其餘bug。

    <script>
        $('#btn').on('click',function(){
            console.log('jquery操做');
        })
        new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4]
            },
            methods:{
                okMethods:function (){
                    console.log("ok")    
                },
                cancelMethods:function (){
                    console.log("cancel")    
                }
            }
        });
    </script>

 有問題歡迎留言，若是你以爲這個文章對你有幫助，就請點個贊吧！