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>

有问题欢迎留言，如果你觉得这个文章对你有帮助，就请点个赞吧！

https://edu.51cto.com/lecturer/11857712.html 星星课堂web前端系列课程

https://edu.51cto.com/course/25959.html js设计模式课程

https://edu.51cto.com/course/23133.html js进阶与组件化实战课程

https://edu.51cto.com/course/24757.html jquery课程

https://edu.51cto.com/course/22392.html js基础与入门课程

https://edu.51cto.com/course/26063.html vue零基础入门课程

https://edu.51cto.com/course/22393.html xhtml与css基础入门课程