day62

一.组件

• 组件都具有模板,template
• new Vue()创建的是根组件
• 组件与实例一一对应,创建一个实例就是创建了一个组件,同理创建一个组件就相当于创建了一个实例
• 根组件的挂载点一般就是根组件的模板,根组件也可以显式书写自己的模板,会替换掉挂载点
• 子组件都具有自身模板,根组件是所有子组件的父级(一级父级....n级父级)

二.局部组件

<div id="app">
    <!-- 连接语法 -->
    <local-tag></local-tag>
</div>
<script>
    // 定义局部组件
    var localTag = {
        template: "<button @click='btnClick'>{{ num }}</button>",
        data () {
            return {
                num: 0
            }
        },
        methods: {
            btnClick () {
                this.num++;
            }
        }
    }
    
    
    // 根组件
    new Vue({
        el: "#app",
        // 子组件要在父组件中使用,需要注册
        components: {
            // 小驼峰 "localTag": localTag
            localTag
        }
    })
</script>

三.全局组件

<div id="app">
    <global-tag></global-tag>
</div>
<script>
    // 定义全局组件
    Vue.component("global-tag",{
        template: "<button @click='btn'>{{ n }}</button>",
        data () {
            return {
                n: 0
            }
        },
        methods: {
            btn () {
                this.n++
            }
        }
    })
    
    // 根组件
    new Vue({
        el: "#app",
    })
</script>

四.数据传递~父传子

<div id="app">
    <local-tag :num="num" :sup_data="sup_data"></local-tag>
</div>
<script type="text/javascript">
    var localTag = {
        props: ['num', 'sup_data'],
        template: "<div @click='divActive'>{{ num }}</div>",
        methods: {
            divActive () {
                console.log(this.num);
                console.log(this.sup_data);
            }
        }
    }

    new Vue({
        el: "#app",
        components: {
            localTag
        },
        data: {
            num: 10,
            sup_data: [1, 2, 3, 4, 5]
        }
    })
</script>
// 1.数据由父级提供
// 2.在父级模板(挂载点)中出现的子组件名(local-tag)上,为其设置全局属性,属性值就是父级提供的数据变量
// 3.在子组件中,提供$props来拿到自身的全局属性名(用''括起来的数组)
// 4.在模板中直接用属性名来访问数据,在方法中通过this.属性名来访问数据
// 5.名字出现多个单词的时候,使用_连接语法进行处理,以达到命名的统一

五.数据传递~子传父

<div id="app">
    <global-tag @send_data="receive_data"></global-tag>
    {{ n }}
</div>
<script type="text/javascript">
    Vue.component("global-tag", {
        template: "<div @click='divAction'>我是div</div>",
        data () {
            return {
                num: 10,
                arrList: [1, 2, 3, 4, 5]
            }
        },
        methods: {
            divAction () {
                this.$emit("send_data", this.num, this.arrList)
            }
        }
    });

    new Vue({
        el: "#app",
        data: {
            n: 0
        },
        methods: {
            receive_data (num, arrList) {
                console.log("接收到的数据:", num, arrList);
                this.n = num;
            }
        }
    })
</script>
// 1.数据由子级提供
// 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
// 3.在父级的模板中,子组件名上,为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
// 4.在实现体中就可以拿到回调参数