vue自定义组件

vue自定义组件

1.vue全局组件

Vue.component("组件名",{obj})；obj跟vue实例一样，唯一不同的是没有el，data必须为函数，确保实例化的独立存储空间；
语法：

Vue.component("component-a"，{
      data(){
            return{
                    message:"hello world"
            }
       },
        template:"<h3>我是自定义全局组件，这是我的数据：{{message}}</h3>"
})

2.vue局部组件

分为两步，第一是定义组件，第二是注册组件，在vue-cli中使用，需要import先引入局部组件vue文件，然后在注册组件就可以了；

var ComponentA={
      template:"<h3>自定义局部组件</h3>"
};       //定义组件，语法与全局一样

new Vue({
   el:"#app",
   components:{
    "component-a":ComponentA          //注册组件
   }
})

相关内容解读

1.组件的命名规

以多个单词命名vue组件，以驼峰值命名，调用必须使用“-”调用，否则会报错，因为html不区分大小写，但是js定义严格区分大小写，所以“componentA”组件，调用的正确写法是“<component-a></component-a>”或是使用单标签<componentA />,而不是“<componentA></componentA>”

总结一些其他常用的写法

<template id="Mydemo">
    <h1>Hello Time</h1>
</template>
<script>
 Vue.component('account',{
        template:"#Mydemo",
    })
</script>

<script>
let list=Vue.extend({
        template:'<h1>this is a list</h1>',
    });
Vue.component("my-list",list);

</script>

2.动态添加组件

使用<component :is="组件名"></component> 可以动态调用组件，下面是一个利用动态组件做的选项卡，不会刷新页面url

<template>
    <div>
        <h1 class="tab">
            <span v-for="(list,index) in menu" :key="index" @click="courseId=list.id">{{list.name}}</span>
        </h1>
        <keep-alive>
                <component :is="courseId"></component>
        </keep-alive>
    </div>
</template>
<script>
import courseJava from "@/components/course-java"
import coursePython from "@/components/course-python"
import courseUi from "@/components/course-ui"
export default{
    name:"course",
    data () {
        return {
            courseId:"courseJava",
            menu:[{
                name:"java",
                link:"/course/java",
                id:"courseJava"
            },
            {
                name:"python",
                link:"/course/python",
                id:"coursePython"
            },
            {
                name:"ui",
                link:"/course/ui",
                id:"courseUi"
            }
        ]
        }
    },
    components: {
        courseJava,
        coursePython,
        courseUi
    }

}

</script>

<keep-alive>keep-alive可以将组件保存在内存中，避免重复渲染；

3.<slot>动态插槽

使用slot插槽分发内容；
（1）courseJava子组件设置

<template>
        <div class="course-java">
            <h3>这是java组件原有数据</h3>
            <slot></slot>
            <slot name="intr"></slot>
        </div>
</template>

（2）父组件引用

<course-java>
    <h1>我是通过slot默认插槽传递过来的</h1>
                <h1>不具名插口</h1>
                <!-- slot设置插槽名称 -->
                <h1 slot="intr">java是一门编程语言</h1>
</course-java>

这种形式使用keep-alive无效；
<slot>中还可以作为一个作用域，在子组件中定义变量，然后在父组件中自定义渲染的方式;父组件页面调用的子组件中必须带有<template scoped=""></template>字段；