说明

组件之间也可以像标签那样嵌套，外面的组件为 父组件，里面的组件为 子组件

非单文件组件

像这种，一个文件中包含多个组件的，就是 非单文件组件

特点：相对简单，易理解，适合学习，但在真正项目中，都是 单文件组件

例子

实现下图：

引入 vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

定义、注册子组件

// 定义子组件
var num_com = {
    template:`
        <div>
            <input type="button" value="-" v-on:click="sub">
            <input type="text" v-model="num">
            <input type="button" value="+" @click="add">
            <br>
            小计: <span v-html="total"></span>
        </div>
    `,
    data:function(){
        return {
            num:1,
        }
    },
    props:["price"],
    computed:{
        total:function(){
            return this.num * this.price
        }
    },
    methods:{

        sub:function(){
            if(this.num >1){
                this.num --
            }

        },
        add:function(){
            this.num ++
        }
    }

}
// 注册子组件
Vue.component("num-com",num_com)

定义、注册父组件

在父组件中，使用子组件

// 定义父组件
var goods = {
    template:`
        <div>
            <img :src="path" width='100'>
            <br>
            {{name}}
            <div v-text="price"></div>
            <num-com :price="price"></num-com>
        </div>
    `,
    data: function(){
        return {
            name:"小天鹅洗衣机",
            price:2000,
            path:"img/iphone.jpg"
        }
    }
}
//注册父组件
Vue.component( "jd-goods" , goods )

使用组件

<div id="app">
    <jd-goods></jd-goods>

    <jd-goods></jd-goods>

</div>

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>

    <div id="app">
        <jd-goods></jd-goods>

        <jd-goods></jd-goods>

    </div>

    <script type="text/javascript">
        // 定义父组件
        var goods = {
            template:`
                <div>
                    <img :src="path" width='100'>
                    <br>
                    {{name}}
                    <div v-text="price"></div>
                    <num-com :price="price"></num-com>
                </div>
            `,
            data: function(){
                return {
                    name:"小天鹅洗衣机",
                    price:2000,
                    path:"img/iphone.jpg"
                }
            }
        }
        //注册父组件
        Vue.component( "jd-goods" , goods )

        // 定义子组件
        var num_com = {
            template:`
                <div>
                    <input type="button" value="-" v-on:click="sub">
                    <input type="text" v-model="num">
                    <input type="button" value="+" @click="add">
                    <br>
                    小计: <span v-html="total"></span>
                </div>
            `,
            data:function(){
                return {
                    num:1,
                }
            },
            props:["price"],
            computed:{
                total:function(){
                    return this.num * this.price
                }
            },
            methods:{

                sub:function(){
                    if(this.num >1){
                        this.num --
                    }

                },
                add:function(){
                    this.num ++
                }
            }

        }
        // 注册子组件
        Vue.component("num-com",num_com)


        var vm = new Vue({
            el:'#app',//选择器: id 样式、元素选择器等  但元素选择器不能绑定body html元素
            data:{
            }
       });
    </script>
    </body>
</html>

原文出处：/show_1IXQ1k5Q5qB.html