Vue父子组件之间的参数传递

偏执的太偏执、 2021-07-24 14:11 531阅读 0赞

目录

一 组件之间的参数传递——父传子

1 原理说明

2 代码

3 效果

二 组件之间的参数传递——子传父

1 原理说明

2 代码

三 以事件发射的方式实现子传父

1 原理

2 代码

3 效果


一 组件之间的参数传递——父传子

1 原理说明

通过子组件的 props 部分,来指明可以接收的参数,父组件通过在标签中写明参数的健值对来传递参数。

props 是表示一个组件的参数部分,props 的写法有两种:

a 通过数组来定义

props:[‘myprop1’,’myprop2’…]

b 通过对象来定义

  1. props:{
  2. myName:{
  3. type:String,
  4. required:true,
  5. default:'默认值'
  6. }
  7. }

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70

2 代码

content.vue

  1. <template>
  2. <div>
  3. 商品列表...
  4. {
  5. {myTitle}}
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: "content",
  11. /* 当前组件的属性列表 */
  12. props:['myTitle']
  13. }
  14. </script>
  15. <style scoped>
  16. </style>

App.vue

  1. <template>
  2. <div id="app">
  3. <!-- 给子组件传值 -->
  4. <MyContent :myTitle="msg"></MyContent>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'app',
  10. data(){
  11. return {
  12. msg:'hello vue!'
  13. }
  14. }
  15. }
  16. </script>
  17. <style>
  18. </style>

3 效果

20200906180253472.png

二 组件之间的参数传递——子传父

1 原理说明

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1

2 代码

content.vue

  1. <template>
  2. <div>
  3. 商品列表...
  4. {
  5. {myTitle}}
  6. <button type="button" @click="btnfn('子组件串给父组件')">点我</button>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: "content",
  12. /* 第一种写法,通过数组来定义 */
  13. // props:['myTitle']
  14. /* 第二种写法,通过对象来定义 */
  15. props: {
  16. myTitle: {
  17. type: String,
  18. required: true,
  19. default: "没传参数"
  20. },
  21. btnfn:{
  22. type: Function
  23. // FCfn(m) {
  24. // this.msg = m
  25. // }
  26. }
  27. }
  28. }
  29. </script>
  30. <style scoped>
  31. </style>

App.vue

  1. <template>
  2. <div id="app">
  3. <!-- 给子组件传值 -->
  4. <MyContent :myTitle="msg" :btnfn="FCfn"></MyContent>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'app',
  10. data() {
  11. return {
  12. msg: '父组件传给子组件!!!'
  13. }
  14. },
  15. methods: {
  16. FCfn(m) {
  17. this.msg = m
  18. }
  19. }
  20. }
  21. </script>
  22. <style>
  23. </style>

3 效果

20200906180408628.png

三 以事件发射的方式实现子传父

1 原理

在子组件中,使用 this.$emit(“键”,”值”)

在父组件中,子组件的标签中,使用 @键=”msg=$event”, 其中$event就能得到值,msg是父组件中 vue 属性。

2 代码

content.vue

  1. <template>
  2. <div>
  3. 商品列表...
  4. {
  5. {myTitle}}
  6. <button type="button" @click="doclick">点我</button>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: "content",
  12. /* 第一种写法,通过数组来定义 */
  13. // props:['myTitle']
  14. /* 第二种写法,通过对象来定义 */
  15. props: {
  16. myTitle: {
  17. type: String,
  18. required: true,
  19. default: "没传参数"
  20. },
  21. btnfn:{
  22. type: Function
  23. // FCfn(m) {
  24. // this.msg = m
  25. // }
  26. }
  27. },
  28. methods:{
  29. doclick(){
  30. this.$emit('newName','子组件内容')
  31. }
  32. }
  33. }
  34. </script>
  35. <style scoped>
  36. </style>

App.vue

  1. <template>
  2. <div id="app">
  3. <!-- 给子组件传值 -->
  4. <MyContent :myTitle="msg" @newName="msg=$event"></MyContent>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'app',
  10. data() {
  11. return {
  12. msg: '父组件传给子组件!!!'
  13. }
  14. },
  15. methods: {
  16. FCfn(m) {
  17. this.msg = m
  18. }
  19. }
  20. }
  21. </script>
  22. <style>
  23. </style>

3 效果

20200906180538805.png

发表评论

表情:
评论列表 (有 0 条评论,531人围观)

还没有评论,来说两句吧...

相关阅读