Vue中使用props实现父子组件传值案例

最新推荐文章于 2024-09-03 16:41:56 发布

苹果函数

最新推荐文章于 2024-09-03 16:41:56 发布

阅读量620

点赞数 2

分类专栏： Vue原理与实战文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_50077864/article/details/127232314

版权

本文介绍了在Vue.js中如何通过props实现父子组件间的值传递。首先创建了一个名为HelloWorld的子组件，利用props接收来自父组件的数据，并通过watch监听数据变化。在父组件HomeView中，引入并注册子组件，通过属性绑定将数据传递给子组件，实现动态交互。

摘要由CSDN通过智能技术生成

一、首先实现一个子组件

在components文件夹中创建一个HelloWorld.vue组件
在这里插入图片描述
具体代码如下：（子组件中是一个表单）

<template>
  <!--子组件-->
  <div class="page-content">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="ruleForm.province"></el-input>
      </el-form-item>
      <el-form-item label="市区" prop="city">
        <el-input v-model="ruleForm.city"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即创建</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-