8.vue学习笔记(组件注册方式+组件传递数据+组件传递-多种数据类型)

1.组件注册方式

一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到对应的实现。
组件注册有两种方式：全局注册和局部注册

1.1.全局注册

全局注册在 main.js 中操作

1.2.局部注册

全局注册虽然很方便，但有以下几个问题：
1.全局注册，没有被使用的组件无法在生产打包时被自动移除（也叫“tree-shaking”）。
如果你全局注册了一个组件，即使它并没有被实际使用，他仍然会出现在打包后的js文件中
2.全局注册在大型项目中使项目依赖关系不那么明确，在父组件中使用子组件时，不太容易定位子组件的实现。
和使用过多的全局变量一样，这可能会影响应用长期的可维护性

1.2.组件传递数据_Props

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的。
传递数据的解决方案就是 props

<template>
    <h3>Parent</h3>
    <Child title="Parent数据" demo="测试"/>
</template>

<script>
import Child from "./Child.vue"

export default {
    data(){
        return{

        }
    },
    components:{
        Child
    }
}
</script>

————————————————————————————————————————————————————————————————————————————————

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <p>{{ demo }}</p>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:["title","demo"]
}
</script>

1.2.1.动态数据传递

<template>
    <h3>Parent</h3>
    <Child :title="message"/>
</template>

<script>
import Child from "./Child.vue"

export default {
    data(){
        return{
            message:"Parent动态数据"
        }
    },
    components:{
        Child
    }
}
</script>

————————————————————————————————————————————————————————————————————————————————

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:["title"]
}
</script>

注意事项
props传递数据，只能从父级传到子级，不能反其道而行

1.3.组件传递-多种数据类型

通过 props 传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字，对象，数组等
但实际上任何类型的值都可以作为 props 的值被传递

1.3.1.Number

<template>
    <h3>Parent</h3>
    <Child :age="age"/>
</template>

<script>
import Child from "./Child.vue"

export default {
    data(){
        return{
            age:20
        }
    },
    components:{
        Child
    }
}
</script>
————————————————————————————————————————————————————————————————————————————————
<template>
    <h3>Child</h3>
    <p>{{ age }}</p>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:["age"]
}
</script>

1.3.2.Array

<template>
    <h3>Parent</h3>
    <Child :names="names"/>
</template>

<script>
import Child from "./Child.vue"

export default {
    data(){
        return{
            names:["Alex","Bob","Frank"]
        }
    },
    components:{
        Child
    }
}
</script>
————————————————————————————————————————————————————————————————————————————————
<template>
    <h3>Child</h3>
    <ul>
        <li v-for="(name,index) of names" :key="index">{{ name }}</li>
    </ul>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:["names"]
}
</script>

1.3.3.Object

<template>
    <h3>Parent</h3>
    <Child :userInfo="userInfo"/>
</template>

<script>
import Child from "./Child.vue"

export default {
    data(){
        return{
            userInfo:{
                name:"Alex",
                age:20
            }
        }
    },
    components:{
        Child
    }
}
</script>
————————————————————————————————————————————————————————————————————————————————
<template>
    <h3>Child</h3>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:["userInfo"]
}
</script>