1、父组件像子组件传值:v-bind进行绑定:(自定义属性)

在这里插入图片描述

父组件

其中counts是自定义属性,它的值是传给子组件的

在这里插入图片描述

子组件

子组件通过props属性,counts是父组件传过来的值
在这里插入图片描述

2、子组件向父组件传值(自定义事件)

在这里插入图片描述

子组件

一、input标签中绑定了一个事件change,当输入框中的值发生变化的时候,就会调用这个事件的方法countChange()
在这里插入图片描述
二、通过第19行代码把input标签中的动元素的value值拿到了,refs是ref事件给后面加追了一个s,这是一种用法
在这里插入图片描述
三、现在要做的就是把lasterValue值传给父组件,那这个方法就是在触发函数中定义一个事件valueUpdate
这样的话,如果有谁对这个事件感兴趣,它就会监听这个事件,在监听过程中进行一些代码逻辑处理
在这里插入图片描述

四、那现在对事件感兴趣的肯定就是父组件中的相关标签了,所以在numbox标签中进行监听valueUpdate事件,当点击事件发生的话,它里面的方法会得到回调
在这里插入图片描述
五、传值
当这个关系打通之后,我们可以为事件附带一些参数,那这个参数便会传递给父组件中监听该事件的那个标签的函数。
子组件:
在这里插入图片描述
父组件
这样的话,父组件就拿到子组件的值了
在这里插入图片描述
可以使用这个值
在这里插入图片描述
在这里插入图片描述

最后,知识点:在视图中用的所有值都要在data()方法的return中定义一下。当

知识点2:图中划横线的三个是同一个东西,这告诉我不仅{{ }}里边的插值要在data()方法里定义,标签里这么写的值同样要定义
另外,value是***子组件***中传过来的
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐