Vue_案例_交互添加_利用子组件调用父组件的添加方法实现

 

 

 

 

前面我们通过组件编程的方法,实现了上面这个页面.

 

 

​

然后下面我们来实现数据的添加,要实现数据的添加,我们需要的是左边这个组件

 

 

​

然后我们给下面的按钮添加一个add事件进行数据提交.

 

 

​

然后我们给用户名,评论内容,添加上变量

 

 

​

然后在data的地方添加上这两个变量.

然后添加上这个add的方法.

 

 

​

然后在add方法中写入,步骤.

 

 

​

我们先去检查这两个变量的值,如果有空的就提示,不能为空.

 

然后我们开始写代码去,可以看到,我们接收到这个name和content的值以后,然后

把这两个值再封装成comment这个对象.

然后我们应该把这个comment对象,添加到我们的comments,所有的评论列表这个对象中去.

 

 

​

我们去看看,我们的这个所有的评论对象列表,在app.vue中来.

我们开发的时候有个原则就是,数据在哪个组件,那么更新数据的行为也应该就定义在哪个组件.

 

 

​

然后,我们去在app.vue中写一个addComment(comment){

this.comments.unshift(comment);

//把传入的这comment对象,添加到comments这个评论列表对象中去.做了个合并操作,相当于java中的list的.add()方法

}

 

 

​

然后我们再把这个addComment()这个函数,写在Add这个子组件的中,当成个属性,把这个函数,传递给子组件

这样指定以后,这个addComment就会变成,子组件this.addComment一个函数属性了

 

 

​

然后我们指定一下这个<Add >这个子组件的他的属性的,type是个function,然后required是必须要有的

 

 

​

这个prop这个属性是我们第一次用,我们去看看文档

 

 

​

可以看到有案例.

 

 

​

这里指定了属性的属性名,属性值的类型,以及必要性

 

 

​

然后我们再回到Add.vue这个子组件中,我们说,前面我们在App.vue中,指定了<App >组件的属性是addComment,

他就会自动的插入到子组件的this对象的属性中去,这里我们就可以直接用了,可以看到

this.addComment(comment);

这里相当于我们子组件,把自己收集到的数据,通过,调用app.vue父组件中的

addComment函数,把自己收集到是数据传递给了父组件,然后父组件拿到数据以后

再添加到自己的comments评论列表对象中去

 

 

​

最后,我们再把,添加完的数据给清空一下

 

 

​

去试试,如果我们直接点击提交会报错对吧.提示不能为空

 

 

​

只输入某一个也会提示,因为我们代码中写了检查了.

 

 

​

都写上以后,然后点击提交

 

 

​

可以看到这样就成功了.