欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue自学：组件子传父操作

程序员文章站 2022-03-01 17:42:26
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. 

  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    8. 

  8.     <title>Vue自学：组件子传父操作</title>
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11.     <!-- 这里是个父组件 -->
    12. 

  12.     <div id="app">
    13. 

  13.         <!-- 使用v-on，但是绑定的属性是this.$emit所发送过去的监听事件，并非普通的click事件 -->
    14. 

  14.         <cpn v-on:item-click="cpnclick"></cpn>
    15. 

  15.     </div>
    16. 

  16. </body>
    17. 

  17.     <!-- 这里是子组件模板 -->
    18. 

  18. <template id="cpn">
    19. 

  19.     <div>
    20. 

  20.         <!-- 这里所使用的categories，是data这个函数内的遍历对象 -->
    21. 

  21.         <!-- v-on:click事件，用于绑定一个item,发送给父组件 -->
    22. 

  22.         <button v-for="item in categories" v-on:click="selfbtn(item)">{{item.name}}</button>
    23. 

  23.     </div>
    24. 

  24. </template>
    25. 

  25. <script type="text/javascript">
    26. 

  26.     //子组件
    27. 

  27.     const cpn = {
    28. 

  28.         //  绑定模板
    29. 

  29.         template:'#cpn',
    30. 

  30.         // 设置数据：必须为函数格式
    31. 

  31.         data(){
    32. 

  32.             // 返回的是一个数组对象类型的数据
    33. 

  33.             return {
    34. 

  34.                 categories:[
    35. 

  35.                     {id:'aaa',name:'kai'},
    36. 

  36.                     {id:'bbb',name:'da'},
    37. 

  37.                     {id:'ccc',name:'liang'},
    38. 

  38.                     {id:'ddd',name:'bian'}
    39. 

  39.                 ]
    40. 

  40.             }
    41. 

  41.         },
    42. 

  42.         methods:{
    43. 

  43.             //绑定了点击时间，形参为item
    44. 

  44.             selfbtn(item){
    45. 

  45.                 //this.$emit('绑定新的事件','传递过去的值')
    46. 

  46.                 this.$emit('item-click',item)
    47. 

  47.             }
    48. 

  48.         }
    49. 

  49.     }
    50. 

  50.     //父组件
    51. 

  51.     const app = new Vue({
    52. 

  52.         el:'#app',
    53. 

  53.         data:{
    54. 

    55. 

  55.         },
    56. 

  56.         components:{
    57. 

  57.             //绑定的对象增强写法
    58. 

  58.             cpn
    59. 

  59.         },
    60. 

  60.         methods:{
    61. 

  61.             //将item传递过来
    62. 

  62.             cpnclick(item){
    63. 

  63.                 console.log('cpnclick',item)
    64. 

  64.             }
    65. 

  65.         }
    66. 

  66.     })
    67. 

  67. </script>
    68. 

  68. </html>
    69.

上一篇： Vue自学：v-model的修饰符使用(lazy、number、trim)

下一篇： Vue自学：v-model结合radio类型使用

推荐阅读