0
点赞
收藏
分享

微信扫一扫

时序数据库TDEngine

犹大之窗 2024-11-18 阅读 21
vue.js

上一篇我们聊了如何用 Vue.js 创建一个简单的组件,这次咱们再往前走一步,讲讲 Vue.js 的父子组件通信。组件开发里,最重要的就是让组件之间能够“说话”,数据能流通起来。废话不多说,直接开干!


父组件传数据给子组件

1. 父组件用 props 给子组件传值

在上一篇的按钮组件基础上,我们稍微改进下。假设我们有一个表单组件 MyForm.vue,里面有两个按钮,一个提交,一个重置:

父组件代码
<template>
  <div>
    <h3>请填写表单</h3>
    <input type="text" placeholder="输入内容" v-model="inputValue" />
    <MyButton :label="'提交'" :type="'primary'" @click="handleSubmit" />
    <MyButton :label="'重置'" :type="'secondary'" @click="handleReset" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue
举报

相关推荐

0 条评论