原文网址:Vue--props--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍Vue中的props的用法。
使用场景
用于父组件给子组件传值。
props可以动态传值。即:父组件修改了值,子组件会同步更新。
官网
组件基础 — Vue.js
示例
代码
Parent.vue(父组件)
<template>
<div class="outer">
<h3>父组件</h3>
名字:<input v-model="name"><br>
年龄:<input v-model="age"><br>
<child v-bind:data1="name" v-bind:data2="age"></child>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: 'Parent',
components: {Child},
data() {
return {
name: "Tony",
age: 20
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid red;
padding: 20px;
}
</style>
Child.vue(子组件)
<template>
<div class="outer">
<h3>子组件</h3>
<div>父组件传过来的data1:{{data1}}</div>
<div>父组件传过来的data2:{{data2}}</div>
</div>
</template>
<script>
export default {
props: ['data1', 'data2']
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
路由(store/index.js)
import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/parent',
name: 'Parent',
component: Parent,
}
],
})
测试
测试1:访问
访问:http://localhost:8080/#/parent
测试2:修改父组件的值
可以看到,父组件修改了值之后,子组件立刻同步更新。