vue中props的用法
vue使用props的用法日常编程中都会用到父组件用子组件、子用父的情况,下面先介绍一种子传父的情况1、在父组件中(1)、首先是在其定义一个list属性以存储其数据值(2)、定义一个绑定属性“mlist”,以为后续props做铺垫,<template><div class="hello"><h2>我是父组件,我需要建立一些参数</h2><spa
·
vue使用props的用法
日常编程中都会用到父组件用子组件、子用父的情况,下面先介绍一种子传父的情况
1、在父组件中
(1)、首先是在其定义一个list属性以存储其数据值
(2)、定义一个绑定属性“mlist”,以为后续props做铺垫,
<template>
<div class="hello">
<h2>我是父组件,我需要建立一些参数</h2>
<span><mHome :mlist="list"/></span>
</div>
</template>
<script>
import mHome from "@/views/Home.vue";
export default {
components: {
mHome,
},
data() {
return {
list: ["小米", "华为", "苹果", "三星"],
msg:'武汉'
};
},
};
</script>
2、在子组件中
(1)先定义props属性,将其父组件所传递的“mlist”属性传输过来(要与父组件定义的名称保持一致)
(2)循环遍历其props的属性,以便展示到其页面中
<template>
<div class="home">
<h1>我是子组件</h1>
<h2>请输入相关手机型号</h2>
<span v-for="(item, index) in mlist" :key="index">{{ item }}</span>
</div>
</template>
<script>
// @ is an alias to /src
export default {
props: ["mlist"],
};
</script>
3、效果图展示
总结:
1、注意其props所使用的名称与父组件绑定的属性名称保持一致
2、步骤:在父组件引入子组件的页面 =》子组件中定义props之后直接使用数据即可
更多推荐
已为社区贡献1条内容
所有评论(0)