vue的父子传值
1.vue的父子传值
首先定义一个父组件和一个子组件,像图片里这样即可
然后把子组件引入到父组件
这里漏了一点(不好意思) 怎么把子组件引入进到父组件里,这样的话你在子组件写的东西就可以在父组件呈现出来
这里就拿这里案例来给大家讲解一下
现在开始父子传值 如上图所示,我们需要在引入到父组件里的那个子组件上,然后看下图
这样的话我们可以把在父组件定义的list数组和handleDelete方法给传到子组件里面,到此我们在父组件里面的任务就基本完成了,接下来我们看我们的子组件
子组件接收父组件传的值得话就需要用到我们的props属性了,
像这样,用props接收过来,里面的type是我们的list的属性,因为我们传出来的是数组,所以在子组件这边就写Array,默认为空数组,这里我们需要知道一点,传到子组件的名字必须和父组件的一样,这样才可以传过来,不然会报错的(红红的一片),这里我们还有从父组件传到子组件的一个删除的方法,这个条件同上,名字千万别出错,后果你们知道的,
这样的话我们就可以完成我们原本在父组件的操作了,这样做的好处呢是可以多次复用,看着简洁美观。
今天就到这里了,感谢大家的观看,如果喜欢的话,可以评论区留言喔!!!