.html工程使用vue.js组件之间相互如何调用(行政区下拉组件为例)

1、前言

现在我在做一个项目，但是没有node环境仅仅就是单纯的html工程，所有的内容都是通过js来写，也就是说vue中import和require语法也不支持，在这种情况下我们原先在vue工程中使用import ｛x｝来引入的方式就会不适合了，当前使用的ui为element-ui。

下面直接上手吧！

2、初步代码

首先我们先要写一个很基本vue页面在.html文件中：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="common/header :: header">
</head>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" th:href="@{~/css/ui/reset.css}">
    <link rel="stylesheet" th:href="@{~/css/ui/index.css}">
    <script th:src="@{~/js/ui/adaptionDP.js}"></script>
    <script th:inline="javascript">
        maqueServiceUrl = [[${maqueServiceUrl}]];
    </script>
</head>


<body>
<div id="app">
    <div>
        <el-cascader :options="options" :show-all-levels="false"
                     @change="onChange" v-model="value"
                     :props="{ checkStrictly: true }"
                     placeholder="请选择" clearable></el-cascader>
        1:{{code}}

    </div>
</div>
</body>


<script>
    let parentId = '';
    let selected = undefined;

    var Main = {
        data() {
            return {
                value: '',
                code: '',
                options: [],
            };
        },
        methods: {
            onChange(item) {
                this.parentId = item[item.length - 1];// 注意这是数组[会发生变化]

                let branchSelected = this.options.find(e => e.value === this.parentId);// 通过xzq110000=>筛选获取code值，来判断是否需要[子.push]
                if (branchSelected != undefined) {
                    this.selected = branchSelected
                } else {
                    // 第一遍筛选，ps:this.options.child只用会丢失数据
                    let provinceData = this.options.find(e => e.value === item[0]);
                    this.selected = provinceData.children.find(e => e.value === this.parentId);// 通过xzq110105=>去筛选获取code值，来判断是否需要[子.push]
                }

                // 页面code
                this.code = this.selected.code;
                this.branch();
            },
            branch(){
                if (this.selected === undefined) {// 如果是全国数据=>直接查询
                    this.findTree(this.parentId, this.options)
                } else {// 如果是省、区级数据=>需要筛选数组[子.push]
                    this.findTree(this.parentId, this.selected.children)
                }
            },
            findTree(parentId, arr) {
                request({
                    url: "http://xx.xx.xx.xx:10108/xzq/xzq/current/tree?parentId=" + parentId,
                    method: 'get'
                }).then(resp => {
                    resp.content.forEach(e => {
                        arr.push({
                            "value": e.id,
                            "label": e.xzqName,
                            "code": e.xzqCode,
                            "children": []
                        })
                    })

                })
            },
        },
        created() {
            // 默认获取全国行政区
            this.findTree('xzq0', this.options)
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>


</html>
<style>

</style>

2、改成全局组件

/**
 * Created by Administrator on 2020/5/13.
 */
let parentId = '';
let selected = undefined;

Vue.component("xzq-cascader", {
    data: function () {
        return {
            value: '',
            code: '',
            options: [],
        }
    },
    methods: {
        onChange(item) {
            this.parentId = item[item.length - 1];// 注意这是数组[会发生变化]

            let branchSelected = this.options.find(e => e.value === this.parentId);// 通过xzq110000=>筛选获取code值，来判断是否需要[子.push]
            if (branchSelected != undefined) {
                this.selected = branchSelected
            } else {
                // 第一遍筛选，ps:this.options.child只用会丢失数据
                let provinceData = this.options.find(e => e.value === item[0]);
                this.selected = provinceData.children.find(e => e.value === this.parentId);// 通过xzq110105=>去筛选获取code值，来判断是否需要[子.push]
            }

            // 页面code
            this.code = this.selected.code;
            this.branch();
        },
        branch(){
            if (this.selected === undefined) {// 如果是全国数据=>直接查询
                this.findTree(this.parentId, this.options)
            } else {// 如果是省、区级数据=>需要筛选数组[子.push]
                this.findTree(this.parentId, this.selected.children)
            }
        },
        findTree(parentId, arr) {
            request({
                url: "http://xx.xx.xx.xx:10108/xzq/xzq/current/tree?parentId=" + parentId,
                method: 'get'
            }).then(resp => {
                resp.content.forEach(e => {
                    arr.push({
                        "value": e.id,
                        "label": e.xzqName,
                        "code": e.xzqCode,
                        "children": []
                    })
                })

            })
        },
    },
    <!-- 标识注册组件结构 -->
    template: "<div><el-cascader :options='options' :show-all-levels='false' @change='onChange' v-model='code' :props='{ checkStrictly: true }' placeholder='请选择' clearable></el-cascader></div>",
    created() {
        // 默认获取全国行政区
        this.findTree('xzq0', this.options)
    }
})

 new Vue({
        el: "#app"
    })

3、去掉new vue部分全部复制到一个单独的如xzq.js文件中