vue父组件与子组件之间传值

发布时间：2023-12-07 10:30

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是***子组件***中传过来的
$\"在这里插入图片描述\"$

vue父组件与子组件之间传值

1、父组件像子组件传值：v-bind进行绑定：（自定义属性）

父组件

子组件

2、子组件向父组件传值（自定义事件）

子组件

相关推荐