『VUE』22. 组件传递数据props(详细图文注释)

目录


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

props

Vue.js中的props是用来父子组件之间传递数据的机制。在Vue组件中,可以通过props属性来定义需要从父组件接收的数据,然后在父组件中通过标签属性的形式传递这些数据给子组件。

在子组件中,可以通过props选项来声明要接收的属性,并且在子组件中就可以像访问data中的数据一样来访问props中的数据。

注意:只能是父给子不能父从子那里拿.


代码实现

父亲在子组件中添加属性

html 复制代码
<Child title="parent的数据" />

子组件拿到数据,注意是字符串格式的title

html 复制代码
  props: ["title"],

child中拿到来自parent的title数据

app.vue

html 复制代码
<template>
  <!-- <GlobalHeader />
  <Main />
  <Aside /> -->
  <Parent />
</template>

<script>
// import Header from "./page/Header.vue";
// import Main from "./page/Main.vue";
// import Aside from "./page/Aside.vue";
import Child from "./components/Child.vue";
import Parent from "./components/Parent.vue";

export default {
  components: {
    // Header,
    // Main,
    // Aside,
    Child,
    Parent,
  },
};
</script>

<style scoped></style>

child.vue

html 复制代码
<template>
  <h3>Child</h3>
  <p>拿到的父组件数据:{{ title }}</p>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["title"],
};
</script>

parent.vue

html 复制代码
<template>
  <h3>Parent</h3>
  <Child title="parent的数据" />
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {};
  },
  components: {
    Child,
  },
};
</script>

传递多种数据类型

这里:title="title"和前面的 title="parent的数据" 有区别,这里的写法在data中配置数据,请注意不要忘记了:号.可以传递多种类型的数据.

Child.vue

html 复制代码
<template>
  <h3>Child</h3>
  <p>字符串数据:{{ title }}</p>
  <p>num数据:{{ num }}</p>
  <ul>
    <li v-for="(item, index) of arry_data" :key="index">{{ item }}</li>
  </ul>
  <br />
  <ul>
    <li v-for="(item, index) of qwer" :key="index">{{ item }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["title", "num", "arry_data", "qwer"],
};
</script>

Parent.vue

html 复制代码
<template>
  <h3>Parent</h3>
  <Child :title="title" :num="num" :arry_data="arry_data" :qwer="mzh" />
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      title: "parent的数据",
      num: 20,
      arry_data: ["mzh", "sxwlxy", "wg191"],
      mzh: {
        name: "mzh",
        age: 23,
      },
    };
  },
  components: {
    Child,
  },
};
</script>

总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


相关推荐
视频砖家22 分钟前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机5 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui