Vue父子组件的写法

Vue中父子组件的各种写法:

第一种:传统的写法

<script>
        //1. 创建组件构造对象;1.必须放在vue的实例中 创建标签<>不要使用大写会识别不出

        // 使用语法糖的可以省略第一步,直接将 {template :`...`, }放在component中;
        const temp= Vue.extend({
            template: `
            <div>
                <h3>这是一个模板zh</h3>
                <p>不要使用大写,否则会失效</p>
            </div> `
    
        });

        // 父组件
        const temp2=Vue.extend({
            template:`
            
            <div>
                <h3>这是父组件另一个模板hhh</h3>
                <p>不要使用大写,父子组件的使用 ,否则会失效</p>
                
                <t2></t2>

            </div> `,
            // 子组件;
            components:{
                t2:temp
                
            },
        })


// 2.注册组件;,这里这个是一个全局的组件,在多个实例中均可以使用;
        Vue.component('zh',temp);
        
        

        // Vue.component("名字",{template:`...`})



// 3.使用模板;  


// 这里的实例相当于一个Vue的root 组件
        var app=new Vue({
            el:".app",

            // components ,s不能少,此时的temp1 为局部组件,只能在app的元素下才有用

           // components:{"temp1":temp},
            // template:,
            data:{
                msg:'',
                msg2:''
            }

        });
        
</script>

结果如下:
父子嵌套,这是在父组件中的extend中对子组件components,进行模板注册;
那能不能在 component中使用呢,这里的子组件只能在父组件中使用,若是需要单独使用,还要再Vue实例(也就是跟组件中在注册一次)

值得注意的是这里的组件是可分为局部组件与全局组件,
与js的变量有些类似,
对于一个组件现在自己本身的中查找是否已经注册,如果没有找到,就会到全局中找是否注册,如果没有找到则会报错;

这里的<zh>是一个全局组件,即使在Vue实例的components中为注册,也是可以的使用的,原因如上;

其中所有的模板最终都会渲染成render函数

方法二:组件语法糖注册

直接省略了Vue.extend();将其中的对象放入Vue.component()中

<script>
 Vue.component("scr",{
            template:"#mb",
            // template:"#mb2",
            components:{}

            // 组件数据的存放;data(),必须是一个函数,需要返回一个对象
            data(){
                return{
                    msg:"",

                }
            }

        });
</script>

值得注意的是:这里注册是全局组件

局部组件语法糖:

<script>
// 这里的实例相当于一个Vue的root 组件
        var app=new Vue({
            el:".app",

            // components ,s不能少,此时的temp1 为局部组件,只能在app的元素下才有用

           components:{
           "temp1":{
           		 template:`
            
            <div>
                <h3>这是父组件另一个模板hhh</h3>
                <p>不要使用大写,父子组件的使用 ,否则会失效</p>
                
                <t2></t2>

            </div> `,
            conmponents:{
            },
           }
           },
            // template:,
            data:{
                msg:'',
                msg2:''
            }

        });
        
</script>

这样又会出现另一个问题,嵌套的层级越来越多,可读性,也会越来越差;

这就要将template中抽离出去,组件的分工也就更加明确;之后只需将id来进行索引,就可建立联系 “#id”

<!-- 一种写法 ,需要一个标识-->
<template id="mb2">
        <div>
                <h3>这又是一个模板mb2 在template中建立的</h3>
                <p>不要使用大写,否则会失效</p>
        </div> 
</template>

<script>
//调用
// ************template的写法 ,scr  为创建的标签;
        Vue.component("scr",{
            // template:"#mb",
            template:"#mb2",

        });

</script>

说到底:各个组件就是一个个的对象,可以将其思想与函数的对象来类比学习