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>

 有問題歡迎留言，如果你覺得這個文章對你有幫助，就請點個贊吧！