动态组件

动态组件：

一、数据的传递初始化显示

1.确定并定义动态显示的数据变量，定义一个名称并确定类型，比如：界面上有列表就要定义一个数组，里面放对象

2.数据变量要放到哪个组件的data里面？这个是最重要的，先搞清页面中有几个组件，再确定是某个组件用到还是某些组件都要用到该数据变量，如果只是某个组件用到，那么就放到该组件中，如果是多个组件都要用到，就要放到它们的父组件中，如：form表单组件往数组中增加数据，list组件中从数组中读取数据显示，这两个组件都要用到，那么就把数组变量放到它们的父组件中

3.子组件如何从父组件拿到数据变量呢？这就涉及到组件间通信，因为父组件中有子组件的占位，给子组件设置一个标签属性，属性名称最好要与变量名称同名，起到对应作用，这里的属性名称正是子组件中props声明的属性，是子组件的属性，属性名称前面要加冒号，这样传过去的才是变量的值。一个组件要接收父组件传过来的值，必须先在props:声明接收的属性，属性名称与父组件中的一致，这个属性就会成为组件对象的属性，这里定义好，在父组件中，子组件才可以引用该属性，props定义的属性正如data中定义的属性一样，在模板<template>就可以直接使用，模板中可以获取到它

需要注意的是：props中属性名称的默认值为类型，如：props: { commont: Object }

4.List组件中的item要单独抽取成一个组件，这样的一个设计思想就和app中的统一起来了

经典的一个应用场景：

list组件处在一个父组件中，item组件处于list组件中，父组件先给list组件传数据，list组件利用v-for循环根据传过来的数组显示出对应的item，再把数据传给item，item根据传过来的数据对象给它里面的子控件绑定对象里面的属性，这样的场景在Android和IOS中都是很常见的

二、写交互，绑定事件监听

先要确定给谁绑定事件回调函数，并在回调函数里做什么

这里以表单增加数据为应用场景说明

1.对表单中基本标签控件的处理：一看到<input>马上想到v-model，进行自动收集数据，一旦写上了v-model，马上在data中定义对应的变量，值默认是 ' '，button绑定@click

2.方法中的步骤：

   2.1  检查输入的合法性

//先把内容取出来
const name = this.name.trim()
const content = this.content.trim()
//判断一下是否存在，这是最基本的，因为没输入的话就拿不到值，就不合法
if( !name || !content){
    alert("名称和内容不能为空")
    return
}

   2.2  根据输入的数据，封装成一个对象

const comment = {name,content}

   2.3   添加到数组中

一个约束：数据变量定义在哪个组件，更新数据的方法就应该定义在哪个组件

同样：数组在哪个组件中定义的，就把更新数据的方法放在哪个组件中

所以应该在父组件中去做这样的事

//如果是把数据放到数组的前面就用unshift方法
addComment(comment){
this.comments.unshift(comment)
}

但是父组件中是不负责调用这个方法的，所以要把这个方法传给子组件

如果和传给子组件呢？

<1>在子组件的标签位置添加属性，：addComment="addComment"

注意：这里传递方法是不传参数的，因为它只负责传递一个方法名引用，告诉子组件，这个方法的实现在我这里，你用到的时候从我这里调用就可以了，传参数是响应事件调用方法的时候才传，这个就跟IOS中的delegate委托机制是一模一样的，恰恰说明了UI开发的设计思想是一样的

<2>在子组件内部声明这个属性addComment

props:{
    //给这个属性指定配置对象值，说明它是什么
    addComment:{
        //大写的Function，表示这个属性的值是一个方法
        type:Function,
        //指定必要性
        required:true
    }
}

子组件内部调用执行添加方法

注意：父组件中实现，传给子组件，子组件中调用

this.addComment(comment)

4.清除输入

this.name='',
this.content=''

删除操作：

依旧是在父组件中实现

//删除一个指定下标的评论内容
deleteComment(index){
    this.comments.splice(index,1)
}

利用属性逐层传递给item

:deleteComment="deleteComment"

list组件中声明，但是它自己不用

props:['comments','deleteComment']

传递给item，在item组件占坑位置处，传递方法，并传递index下标

:deleteComment="deleteComment" :index="index"

item组件内部声明两个

props:{
    deleteComment: Function,
    index: Number
}

实现

deleteItem(){
    const {comment,index,deleteComment} = this
    if(window.confirm(`确定删除${comment.name}的评论吗？`)){
        deleteComment(index)
    }
}