vue组件中数据传递 components props

港控/mmm° 2023-01-01 03:38 175阅读 0赞

组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。这个正向的数据传递在vue组件中就是通过props来实现的。

子组件

<template>
      <div>
        {
       {title}}
      </div>
    </template>
    
    <script>
    
      export default {
        props: ['title'],
        data() {
          return {
            userinfo: {
              username: null,
              password: null,
              code: null,
            },
          };
        },
        methods: {
          btnSubmit() { //发送事件  数据
            this.$emit("btnSubmit", this.userinfo);
          },
        },
      };
    </script>

父组件

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <children1 title="children1"/>
        <component is="children2" title="children2"></component>
      </div>
    </template>
    
    <script>
      import children1 from '@/components/children1'
      import children2 from '@/components/children2'
      export default {
      components:{children1,children2},
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件中数据传递 components props

组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。

港控/mmm°/ 2023年01月01日 03:38/ 0 赞/ 176 阅读

相关 vue 组件（component、components）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

分手后的思念是犯贱/ 2022年12月12日 15:07/ 0 赞/ 221 阅读

相关 vue components组件

组件组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。 1.局部注册

约定不等于承诺〃/ 2022年11月29日 12:23/ 0 赞/ 232 阅读

相关 vue组件之间的数据传递

vue组件之间的数据传递最近在整理项目中代码，在组件之间数据传递遇到了问题，所以做了这次总结，如有不对的地方，望指正。父组件如何将数据传到子组件中父组件可以

柔光的暖阳◎/ 2022年05月25日 14:28/ 0 赞/ 276 阅读

相关 vue组件props中异步获取的数据

在使用vue组件时，我们不免使用props获取父组件的数据，对于父组件直接定义的数据，例如： data\{ sex: ‘男’， …. \} 我们直接使用即可

拼搏现实的明天。/ 2022年05月24日 01:25/ 0 赞/ 548 阅读

相关 Vue 组件之使用props传递数据

组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。

Dear 丶/ 2022年05月15日 23:09/ 0 赞/ 981 阅读

相关十七、Component 组件props 属性设置

Component 组件props 属性设置所谓组件就是自定义一个标签，设置标签里面的属性。 pro

た入场券/ 2022年05月03日 07:57/ 0 赞/ 440 阅读

相关 vue组件间的数据传递

方法一：父子组件之间父组件引用子组件 ![20190623100254572.png][] 子组件接收 ![watermark_type_ZmFuZ3poZW5

阳光穿透心脏的1/2处/ 2022年01月05日 07:01/ 0 赞/ 324 阅读

相关 Vue使用props传递数据

1. Vue使用props传递数据组件不仅仅是用来进行内容的复用，更重要的是组件之间的要进行通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或参数，子

素颜马尾好姑娘i/ 2021年09月27日 14:28/ 0 赞/ 558 阅读

相关 vue组件（二）--prop传递数据

[组件组合][Link 1] 组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给

曾经终败给现在/ 2021年09月14日 12:52/ 0 赞/ 858 阅读