vue组件

• template:设置页面
• components:引入组建

全局组件Vue.component

//将页面显示的ul部分作为一个组件,
//Vue.component创建的是全局组件
Vue.component('todo-item',{
    template:'
item
'  //模板(其中的HTML代码)
})

调用:

<ul>
    
    <todo-item>todo-item>
ul>

局部组件

局部组件声明

var TodoIrem={
    template:'
item
'
}

声明:由于是局部的,需要在要使用的实例那里声明

new Vue({
    el:"#root",
    components:{        //做组件声明
        'todo-item':TodoItem
//若是左右相同,可以只写一边的  TodoItem
    },

使用:

• 方法1:

<todo-item>todo-item> 

• 方法2:使用is引入

<p is='todo-irem'>p>

方法2优势,可以动态的使用组件,使用:is 的时候,可以引用变量

动态引入:
<p :is='getTodo'>p>
data中:   getTodo:'todo-irem'

子组件多级调用

var my2={
    template:'
123456
',
}
//创建一个子组件
var my1={
    template:'
',//多级调用,要在这里
    components:{
        //my1
        'my2':my2
    }
}
new Vue({//根组件
    el: '#app',
    data: {
        content: 'Hello'
    },
    components:{
        'my':my1
    }
})

子组件data赋值

子组件要避免引用赋值

//创建一个子组件
var my1={
    template:'
{{f}}
',
    components:{
        //my1
        'my2':my2
    },
    data :function(){//也可以使用    data (){
        return{
            f:2
        }
    }
}

组件与实例的关系

每一个组件,就是一个实例,每一个组件上都可以定制方法等内容

父组件向子组件传递数据

• 父组件在调用子组件的标签中设置变量
  • :变量名=父组件数据
• 子组件接收参数:
  • 用props接收参数

注意,key值设置的时候大小写不敏感,要使用-,props中也是,当时子组件调用的时候,使用的是驼峰的样式.

案例:

父组件设置参数

<todo-item v-for="(item,index) of list"
    :key="index"
    :content="item"
>todo-item>
设置了两个变量key和content

子组件接收参数:

接收参数可以是list格式,也可以是对象格式:

数组格式:
Vue.component('todo-item',{
    props:['content','key'],//2.接收参数content
    template:'
{{content}}
'  //3.设置显示模板(其中的HTML代码)也可以在页面中调用 this.content
})

对象格式
props:{
    'aaa':[Number,String,Object]//指定参数运行的格式
}

子组件向父组件传递事件

子组件抛出方法,子组件触发的时候,调用父组件对应的方法

子组件设置方法

this.$emit('delete-a',this.index);//不支持驼峰形式
//抛出的名,子组件传递的参数

父组件设置

@子组件抛出的名='父组件中的方法名',

调用子组件的事件的时候,调用的就会是父组件的方法了.

案例: 删除功能(互相传递)

• 已有功能:(父组件数据传递到子组件)

点击提交,会将input中的内容保存到list,子组件会遍历list,设置为item,以content传递到props,在template中显示.

• 需要实现:(由子组件触发父组件方法)

要想删除子组件,在每一条上加上click方法,删除的时候,要删除的是父组件list中的内容.
调用的是子组件的方法,删除父组件的数据,需要两个组件之间进行通信(此时需要子组件中,这一条的下标,来和父组件中对应).

• 传递顺序:

1.点击子组件(显示的内容中)的方法handleClick(click方法),调用方法, this.$emit创建在父组件中显示的名(@…自定义事件)和参数,在父组件中调用@…( 注意,自定义事件不支持驼峰形式

父组件页面

<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交button>
    div>
    <ul>
        
        <todo-item v-for="(item,index) of list"
            :key="index"
            :content="item"
            :index="index"
            @delete-a="handleDelete"
            >  
            
        todo-item>
    ul>
div>

父组件script

new Vue({
    el:"#root",
//    components:{//做组件声明
//        'todo-item':TodoItem
//    },
    data:{
        inputValue:'',
        list:[]
    },
    methods:{
        handleSubmit:function(){
            //点击提交的时候,将input的值放到list中
            this.list.push(this.inputValue)
            this.inputValue=''//将inputValue设置W为空,这样输入框就会自动为空了
        },
        handleDelete:function (index) {
            //删除list中对应下标的内容,即可删除页面中的数据
            //从下标位置,删除一项
            this.list.splice(index,1)
        }
    }
})

子组件接收参数,传递方法

//将页面显示的ul部分作为一个组件,
//Vue.component创建的是全局组件
Vue.component('todo-item',{
    props:['content',"index"],//2.接收参数content和index
    template:'
{{content}}
', //3.设置显示模板(其中的HTML代码)
    methods:{
        handleClick:function(){//设置handleClick点击方法
            //调用$emit,调用自定义的事件,传入接收的下标值
            this.$emit('delete-a',this.index) //点击handleClick的时候,抛出delete-a,父组件调用  delete-a对应的方法
        }
    }
})

插槽:子组件显示父组件定义的标签

在父组件中调用子组件,再向子组件的标签中添加内容的时候,不会显示,只会显示子组件本身的内容

<todo-irem>
    <p>123p>
todo-irem>

只会显示
想要这部分内容显示,可以在子组件的模板中使用标签

子组件添加<slot>slot>,父组件设置的内容会在这里面显示
template:'<div><li>i123131132temli><slot>slot>div>'

在子组件中加上这个标签,就会把父组件调用的时候添加的内容显示

注意:子组件必须在一个大标签之下,

插槽设置默认内容

当插槽没有设置的时候,默认显示内容

template:'<div><li>i123131132temli><slot>没有内容slot>div>' ,

插槽设置名字

子组件设置

template:'<div><li>i123131132temli><slot name="header">header没有内容slot><slot name="footer">footer没有内容slot>div>',

父组件调用

<todo-irem>
    <p slot='header'>header插的内容 p>
    
todo-irem>

动态组件is

在父组件中声明子组件之后,在页面中:

<p :is='getTodo'>p>

这样就可以动态设置了,getTodo是data中的属性,通过改变它的值改变绑定的子组件

getTodo:'todo-irem'

组件缓存:

当组件从a切换到b,的时候,a就会缓存起来,从b切换回a的时候,直接读缓存

<keep-alive>
    <p :is='getTodo'>p>
keep-alive>