0
点赞
收藏
分享

微信扫一扫

Vue--props--使用/教程/实例

IT程序员 2022-01-09 阅读 87

原文网址: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:修改父组件的值

可以看到,父组件修改了值之后,子组件立刻同步更新。

举报

相关推荐

0 条评论