目录
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