vue3学习第二课：组件和父组件的传递数据给子组件方式props

Posted 2023-04-07 我爱写代码

1，在conponents目录中新建header.vue

<template>
    <div>
        <h1>这是头部组件</h1>
    </div>
</template>

2，在App.vue中添加

<template>
  <div>
    <Header></Header>
    <Main></Main>
    <Footer :content="newcontent"></Footer>
  </div>
</template>

<script>
import Header from \'./components/Header.vue\'
import Footer from \'./components/Footer.vue\'
import Main from \'./components/Main.vue\'
//命令式
//document.querySelector(\'h1\').innerHTML=\'hello world\'

//声明式
export default 
  name: \'App\',
  data() 
    return 
      newcontent:"阿里云有限公司，欢迎光临"
    
  ,
  components: 
    Header,
    Footer,
    Main,


</script>

<template>
    <div>
        <h1>msg这是Main组件</h1>
    </div>
</template>
<script>
export default
    data() 
        return 
            msg:"我来学vue3的---"
        
    ,

</script>

Footer.vue

<template>
    <div>
        <h1>这是底部部件 content </h1>
    </div>
</template>
<script>
export default 
    props:[\'content\']

</script>

 效果图：

本文来自博客园，作者：super_ip，转载请注明原文链接：https://www.cnblogs.com/superip/p/17296923.html

在子组件和父组件之间传递数据

【中文标题】在子组件和父组件之间传递数据

【英文标题】：passing data between child and parent component

【发布时间】：2020-10-26 06:16:28

【问题描述】：

在我的 Angular 应用程序中。我正在使用子组件和父组件。我想将数据从我的父组件传递到子组件。我能够做到。我有更多数据要传递给子组件。而不是对每个值使用 Input 属性。我只想使用一个 Input 并用它传递更多值。可能吗？。请指导我。

我尝试以数组的形式传递多个输入值。问题是我在 childComponent onInit 中实现该表单。

父组件 HTML

<form class="parentForm" [formGroup]="parentForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test0"
        />
      </div>
    </div>
  </div>
  <app-child
    [childForm]="parentForm.controls.childForm"
    [Test0]="Test"
    [Test1]="Test1"
    [Test2]="Test2"
    [Test3]="Test3"
    [Test4]="Test4"
    [Test5]="Test5"
  ></app-child>
</form>

子组件 TS

@Input() Test: any;
@Input() Test1: any;
@Input() Test2: any;
@Input() Test3: any;
@Input() Test4: any;
@Input() Test5: any;

子组件 HTML

<form [formGroup]="childForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12" *ngIf="( Test === 't1')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test"
        />
      </div>
      <div class="col-md-12" *ngIf="(Test1 === 't2')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test1"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test2 === 't3')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test2"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test3 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test4 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test5 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
    </div>
  </div>
</form>

【参考方案1】：

您可以直接在输入中传递对象。

这样的东西应该可以工作

ParentComponent.ts

let ultimate_test = "Test":"t1","Test1":"t2"...

ParentComponent.html

<app-child [childForm]="parentForm.controls.childForm" [ultimate_test]="ultimate_test"></app-child>

ChildComponent.ts

@Input() ultimate_test: any;

ChildComponent.html

<form  [formGroup]='childForm'>
  <div class="col-md-12" >
    <div class="row">
      <div class="col-md-12" *ngIf ="( ultimate_test.Test === 't1')">
        <input class="" type="text" placeholder=" info" formControlName="test">
      </div>
      <div class="col-md-12" *ngIf ="( ultimate_test.Test1 === 't2')">
        ...
      </div>
    </div>
  </div>
</form>

编辑

我建议您将formControlName 指定为对象ultimate_test 的值。这样，您可以使用 Pipe 迭代子组件上的值并将您的值直接添加到 formControlName 属性。您不必在每次输入时都使用*ngIf。

【讨论】：

嗨。我已经尝试过你的建议。我能够在子组件中的 ng 模板中成功实现它。我无法从 ng-template 中实现它。它给了我一个错误。 core.js:5873 错误类型错误：无法读取未定义的属性“测试”。

你能展示你的代码或分享一个stackblitz吗？