Vue基础

135 阅读1分钟

vue的父子传值

1.vue的父子传值

image.png

首先定义一个父组件和一个子组件,像图片里这样即可

然后把子组件引入到父组件

image.png 这里漏了一点(不好意思) 怎么把子组件引入进到父组件里,这样的话你在子组件写的东西就可以在父组件呈现出来 image.png

这里就拿这里案例来给大家讲解一下

现在开始父子传值 如上图所示,我们需要在引入到父组件里的那个子组件上,然后看下图

image.png

这样的话我们可以把在父组件定义的list数组和handleDelete方法给传到子组件里面,到此我们在父组件里面的任务就基本完成了,接下来我们看我们的子组件

子组件接收父组件传的值得话就需要用到我们的props属性了,

image.png

像这样,用props接收过来,里面的type是我们的list的属性,因为我们传出来的是数组,所以在子组件这边就写Array,默认为空数组,这里我们需要知道一点,传到子组件的名字必须和父组件的一样,这样才可以传过来,不然会报错的(红红的一片),这里我们还有从父组件传到子组件的一个删除的方法,这个条件同上,名字千万别出错,后果你们知道的,

image.png

这样的话我们就可以完成我们原本在父组件的操作了,这样做的好处呢是可以多次复用,看着简洁美观。

今天就到这里了,感谢大家的观看,如果喜欢的话,可以评论区留言喔!!!