创建vue 非单页面组件

Vue非单页面组件是指在单个Vue实例中包含多个组件的情况，这些组件可以相互独立，也可以互相通信。创建Vue非单页面组件的步骤如下：

创建Vue实例

在HTML文件中引入Vue库，并创建Vue实例，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue Non-Single Page Component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 组件区域 -->
    </div>
</body>
</html>

<script>
var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {},
});
</script>

创建组件

在Vue实例的components选项中添加组件，组件可以是全局组件也可以是局部组件。全局组件可以在应用的任何地方使用，而局部组件只能在父组件中使用。如下所示，创建了一个全局组件和一个局部组件。

Vue.component('global-component', {
    template: '<div>这是一个全局组件</div>'
});

var localComponent = {
    template: '<div>这是一个局部组件</div>'
}

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {
        'local-component': localComponent
    },
});

在模板中使用组件

在模板中使用组件，可以使用Vue实例的template选项或者在HTML文件中使用Vue指令。如下所示，在Vue实例的template选项中使用两个组件。

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {
        'global-component': {
            template: '<div>这是一个全局组件</div>'
        },
        'local-component': {
            template: '<div>这是一个局部组件</div>'
        }
    },
    template: '<div><global-component></global-component><local-component></local-component></div>'
});

组件通信

在Vue非单页面组件中，组件之间可以通过props和事件实现通信。props是在父组件中定义，然后传递给子组件；事件是在子组件中定义，然后由子组件触发，父组件通过监听子组件的事件来获取数据。如下所示，创建了一个父组件和一个子组件，通过props和事件实现了通信。

Vue.component('parent-component', {
    template: '<div><child-component :message="message" @send-message="getMessage"></child-component></div>',
    data: function() {
        return {
            message: ''
        }
    },
    methods: {
        getMessage: function(message) {
            this.message = message;
        }
    },
    components: {
        'child-component': {
            template: '<div><input type="text" v-model="message"><button @click="sendMessage">发送消息</button></div>',
            props: ['message'],
            data: function() {
                return {
                    message: this.message
                }
            },
            methods: {
                sendMessage: function() {
                    this.$emit('send-message', this.message);
                }
            }
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {},
    template: '<div><parent-component></parent-component></div>'
});

以上就是创建Vue非单页面组件的基本步骤，可以根据需求进行修改。