功能描述

组件（Component）是 Vue.js 最强大的功能之一，父子组件可以通过prop属性进行参数传递。

本例实现功能描述

本例子实现了从父组件到子组件的参数传递，并且子组件也可以通过$emit方式传递参数给父组件。

[!TIP|label: 定义componentParent.vue]
在src/views/basic/sys文件下新建一个componentParent.vue页面，添加以下代码。
这里是模版添加在src/views/basic/sys，开发的时候应该放在组件文件夹下

  1. <template>
  2.   <div>
  3.     <h2>{{ msg }}</h2>
  4.     <p>===========================</p>
  5.     <componentSon parentMsg="传递给子组件的信息" @transfer="getSonMessage"></componentSon>
  6.   </div>
  7. </template>
  9. <script>
  10.   import componentSon from "./componentSon"
  11.   export default {
  12.     name: "parent",
  13.     data () {
  14.       return{
  15.         msg: '父组件'
  16.       }
  17.     },
  18.     components: {
  19.       componentSon
  20.     },
  21.     methods: {
  22.       getSonMessage (msg) {
  23.         this.msg = msg
  24.       }
  25.     }
  26.   }
  27. </script>
  29. <style scoped>
  31. </style>

[!TIP|label: 定义componentSon.vue]
在src/views/basic/sys文件下新建一个componentSon.vue页面，添加以下代码。

  1. <template>
  2.   <div>
  3.     <h2>{{ msg }}</h2>
  4.     <p>子组件接收到内容：{{ parentMsg }}</p>
  5.     <input type="text" v-model="infoToParent">
  6.     <button @click="sentMsgToParent">传值给父组件</button>
  7.   </div>
  8. </template>
  10. <script>
  11.   export default {
  12.     name: "son",
  13.     data () {
  14.       return{
  15.         msg: '子组件',
  16.         infoToParent: ''
  17.       }
  18.     },
  19.     methods:{
  20.       sentMsgToParent(){
  21.         this.$emit('transfer',this.infoToParent)
  22.       }
  23.     },
  24.     props:['parentMsg']// 接受psMsg值
  25.   }
  26. </script>
  28. <style scoped>
  30. </style>

[!TIP]
最后配置componentParent.vue的菜单，具体方法见vue方式开发指南-部署与启动里面的菜单路由配置