zoukankan      html  css  js  c++  java
  • vue组件之间互相传值:父传子,子传父

    一般页面的视图App.vue

    一.父组件向子组件传值

    1.创建子组件,在src/components/文件夹下新建一个Child.vue
    2.Child.vue的中创建props,然后创建一个名为message的属性

     3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

     4.保存修改的文件,查看浏览器

    5.我们依然可以对message的值进行v-bind动态绑定

    父组件向子组件传值成功
    总结一下:

      • 子组件在props中创建一个属性,用以接收父组件传过来的值
      • 父组件中注册子组件
      • 在子组件标签中添加子组件props中创建的属性
      • 把需要传给子组件的值赋给该属性
    二.子组件向父组件传值

    1.在子组件中创建一个按钮,给按钮绑定一个点击事件

    2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

     3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

    子组件向父组件传值成功
    总结一下:

      • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
      • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
      • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
      • 在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
    一.父组件向子组件传值

    1.创建子组件,在src/components/文件夹下新建一个Child.vue
    2.Child.vue的中创建props,然后创建一个名为message的属性


     

    3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值


    App2.png


    4.保存修改的文件,查看浏览器


    browser.png


    5.我们依然可以对message的值进行v-bind动态绑定


    App3.png


    此时浏览器中


    browser2.png

    父组件向子组件传值成功
    总结一下:

    • 子组件在props中创建一个属性,用以接收父组件传过来的值
    • 父组件中注册子组件
    • 在子组件标签中添加子组件props中创建的属性
    • 把需要传给子组件的值赋给该属性

    二.子组件向父组件传值

    1.在子组件中创建一个按钮,给按钮绑定一个点击事件


    Child2.png


    2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数


    Child3.png


    3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法


    App4.png


    4.保存修改的文件,在浏览器中点击按钮


    browser3.png

    子组件向父组件传值成功
    总结一下:

    • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
    • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
    • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
    • 在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

     具体文档:https://www.cnblogs.com/chenhongshuang/p/8678207.html

  • 相关阅读:
    【设计模式】第九篇:组合模式解决层级关系结构问题
    【设计模式】第八篇:喝豆浆就是装饰者模式吗?
    【设计模式】第七篇:和我一起简单认识桥接模式
    【设计模式】第六篇:来康康适配器模式
    【设计模式】第五篇:什么是原型模式?浅提浅拷贝和深拷贝
    【计算机网络】学习笔记,第三篇:数据链路层(谢希仁版)
    一篇搞定工厂模式【简单工厂、工厂方法模式、抽象工厂模式】
    单例模式的几种实现And反射对其的破坏
    缓存穿透、击穿、雪崩什么的傻傻分不清楚?看了这篇文后,我明白了
    图文并茂,带你深入了解AQS的源码
  • 原文地址:https://www.cnblogs.com/yangjingyang/p/11468512.html
Copyright © 2011-2022 走看看