vue中的组件

2019年8月17日

---

创建组件的方式

方式一

使用Vue.extend来创建全局的vue组件

		//使用Vue.extend来创建全局的vue组件
        var com1=Vue.extend({
            template:'<h3>这是一个h3</h3>' //通过template属性，指定了组件要展示的HTML结构
        })
        //使用Vue.component('组件的名称',创建出来的组件模板对象)
        //如果使用Vue . component定义全局组件的时候,组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时,两个单词之前,使用-链接;
        //如果不使用驼峰,则直接拿名称来使用即可;
        Vue.component('mycom1',com1)

如果使用Vue . component定义全局组件的时候,组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时,两个单词之前,使用-链接;

例如创建的组件名称是myCom1, 则在HTML中进入的时候要写为

<my-com1></my-com1>

如果不使用驼峰,则直接拿名称来使用即可;

---

方式二

		Vue.component('mycom2',{
            template:'<h3>这是一个h3</h3>'
        })

注意:不论是哪种方式创建出来的组件,组件的template 属性指向的模板内容,必须有且只能有唯一的一个根元素
所以最好外面嵌套一个div

---

方式三

Vue.component('mycom3',{
            template:'#tmp1'
        })

引用方式
在被控制的#app外面，使用template元素，定义组件的HTML模板结构

<template id="tmp1">
                <h4>这是第三种创建方式</h4>
            </template>

---

使用components创建私有组件

在实例内部添加components属性

var vm2=new Vue({
            el:'#app2',
           data:{},
           methods:{},
           components:{     //定义实例内部私有组件的
            login:{
                template:'#tmp2'
            }
           }
        })

在页面中引用私有属性

<div id="app2">
        <template id="tmp2">
            <h1>
                这是私有的组件
            </h1>
        </template>   
    </div>

---

组件中的data

1.组件可以有自己的data数据
2.组件的data和实例的data 有点不一样，实例中的data 可以为一个对象,但是组件中的data必须是个方法
3.组件中的data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
4.组件中的data数据，使用方式,和实例中的 data使用方式一样

Vue.component('mycom1',{
            template:'<h1>这是全局组件--{{msg}}</h1>',
            data:function(){
                return{
                    msg:'这是data'
                }
            }
        })

如果要在页面中引用，在相应位置使用插值表达式即可

为组件添加tag=""这个属性可以指定渲染成指定类型的标签