一、全局组件

<body>
    <!-- 两个全局vue实例可以不用注册全局组件,就可以使用 -->
    <div id="app">
        <global-tag></global-tag>
    </div>
    <div id="main">
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建全局组件 组件名 {}
    Vue.component('global-tag', {
        template: "<div @click='fn'>全局组件点击了 {{ count }} 次</div>",
        data: function () {
            return {
                count: 0
            }
        },
        methods: {
            fn: function () {
                this.count++;
            }
        }
    });
    // 两个挂载点
    new Vue({
        el: "#app",
    });
    new Vue({
        el: "#main",
    });
</script>

二、父组件传递信息给子组件

'''
采用属性绑定的方式
1,父级提供数据 
2.绑定给子组件的自定义属性 
3.子组件通过props的数组拿到自定义属性从而拿到数据
'''

<body>
    <div id="app">
        <input type="text" v-model="sup_data">
        <!-- 2 -->
        <global-tag :abcde="sup_msg" :sup_data="sup_data"></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建全局组件
    Vue.component('global-tag', {
        // 3
        props: ['abcde', 'sup_data'],
        template: "<div @click='fn'>{{ abcde }}</div>",
           methods: {
            fn: function () {
                alert(this.sup_data)
            }
        }
    });
    // 将父组件的信息传递给子组件
    // 采用属性绑定的方式: 1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据
    new Vue({
        el: "#app",
        data: {
            // 1
            sup_msg: "父级的msg",
            sup_data: ""
        }
    });
</script>

三、子组件传递信息给父组件

'''
采用发生事件的方式:
1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
'''

<body>
    <div id="app">
        <!-- abc为子组件的自定义事件,该事件的含义要在子组件内容声明规定 -->
        <!-- 2 -->
        <global-tag @abc="action"></global-tag>
        <global-tag @abc="action"></global-tag>
        {{ sup_info }}
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    // 创建全局组件
    Vue.component('global-tag', {
        template: "<div><input v-model='info'><p @click='sendMsg'>子组件</p></div>",
        data: function () {
            return {
                info: "",
                msg: "子组件的信息"
            }
        },
        methods: {
            // 1
            sendMsg: function () {
//                alert(123)
                // 激活自定义事件 abc
                this.$emit('abc', this.msg, this.info)
            },

        }
    });
    // 将子组件的信息传递给父组件
    // 采用发生事件的方式:
    // 1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
    // 2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
    // 3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
    new Vue({
        el: "#app",
        data: {
            sup_info: ""
        },
        methods: {
            // 3
            action: function (msg, info) {
                alert(msg)
                this.sup_info = info
            }
        }
    });
</script>

四、vue项目开发

'''
一个.vue文件就是一个组件
一个个小组件(存放在conponents文件夹下)组成一个可以代表页面的大组件(存放在views文件夹下)
每一个组件(.vue文件)都由 <template><template> <script></script> <style></style>

要打开一个已有的项目并运行,不需要项目的node_modules文件夹,今日项目目录执行npm install会自动安装项目的依赖包
'''

<template>
    <!-- 模板区域: 只能有一个根标签 -->
    <div class="tagname">
        <!-- n个复杂的子标签 -->
        <!-- 使用子组件,Vue模板语言下支撑大小写 -->
        <SubTag></SubTag>
    </div>
</template>
<script>
    import SubTag from './components/SubTag.vue'
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {
        // 表示本组件的名字,一般都省略
        name: 'tagname',
        // 数据
        data: function() {
            return {
                
            }
        },
        // 注册子组件
        components: {
            'SubTag': SubTag
        },
        methods: {
            // 书写该组件的方法
        }
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于本组件内部, 不添加scoped则代表全局样式(那么其他组件类名为tagname的也将被控制) */
    /* 书写的就是原生的css代码 */
    .tagname {
        background-color: orange
    }
</style>