zoukankan      html  css  js  c++  java
  • Vue中的父子传值问题

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教!

    好久没更博了,感觉下班后的时间莫名其妙就没有了,有了,了。。。

    趁着端午放假,更一篇博吧,也算是对已过半的6月一个交代。恩,已过大半~

    主题是Vue中几种常见的传值方法。。。先写个父子传值吧

    vue-cli构建项目目录,噜啦啦,这个就不用说了吧。

    接着创建父子组件,父组件Father.vue,子组件Son.vue(随意起名,开心就好),然后在父组件中引入子组件,创建一个父组件的路由。车门已经焊死了,请继续往下看

    1.父传子

    Father.vue(用v-bind(简写 : )  将父组件传的值绑定到子组件上)

    <template>
      <div>
          我是爸爸:{{message}}
          <hr>
          <Son :toSonData="toSonData"></Son>
      </div>
    </template>
    
    <script>
    import Son from "./Son.vue";
    export default {
      data() {
        return {
          message : "儿子你好",
          toSonData: "大嘴巴子"//给子组件的值
        };
      },
    
      components: {
        Son
      }
    };
    </script>
    <style lang='scss' scoped>
    </style>

    Son.vue(在子组件中用props方法接收父组件传来的值,两种方法,具体用哪种看个人喜好,推荐第二种)

    <template>
      <div>
        我是儿子:{{message}}
        <br>
        爸爸给我的礼物:{{toSonData}}
      </div>
    </template>
    
    <script>
    export default {
      // props:["toSonData"],//第一种方式
      props:{//第二种方式
        toSonData:{
          type:String,
          default:function(){
            return ""
          }
        }
      },
      data () {
        return {
          message : "爸爸你好"
        };
      },
    }
    
    </script>
    <style lang='scss' scoped>
    </style>

    效果图:

    2.子传父

    Son.vue(在子组件中创建一个按钮,定义一个点击事件,点击事件里用this.$emit方法触发一个自定义事件,并传递一个参数)

    <template>
      <div>
        我是儿子:{{message}}
        <br>
        爸爸给我的礼物:{{toSonData}}
        <br>
        <button @click="toFatherData">给爸爸传值</button>
      </div>
    </template>
    
    <script>
    export default {
      // props:["toSonData"],//第一种方式
      props:{//第二种方式
        toSonData:{
          type:String,
          default:function(){
            return ""
          }
        }
      },
      data () {
        return {
          message : "爸爸你好"
        };
      },
      methods:{
        toFatherData(){
          this.$emit("toFatherData","给爸爸的爱")
        }
      }
    }
    
    </script>
    <style lang='scss' scoped>
    </style>

    Father.vue(在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法,将接收到的值赋给data中的sendSonMessage)

    <template>
      <div>
          我是爸爸:{{message}}
          <br>
          儿子传来的值:{{sendSonMessage}}
          <hr>
          <Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
      </div>
    </template>
    
    <script>
    import Son from "./Son.vue";
    export default {
      data() {
        return {
          message : "儿子你好",
          toSonData: "大嘴巴子",//给子组件的值
          sendSonMessage: ""
        };
      },
    
      components: {
        Son
      },
      methods:{
        sendSonData(data){
          this.sendSonMessage=data;
        }
      }
    };
    </script>
    <style lang='scss' scoped>
    </style>

    效果图:

    这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
    前端入坑全套教学视频

    扫二维码加为好友就完事了!安排~


    扫码加群哦

  • 相关阅读:
    JSONObject简介
    android:layout_gravity 和android:gravit的区别?
    CountDownTimer,0,0
    java应用集锦9:httpclient4.2.2的几个常用方法,登录之后访问页面问题,下载文件
    HttpClient学习系列 -- 学习总结
    创建多线程的HttpClient
    HttpClient4.X 升级 入门 + http连接池使用
    Java Executors(线程池)
    [微软官方]SQLSERVER的兼容级别
    vSphere Client 连接ESXi 或者是vCenter 时虚拟机提示VMRC异常的解决办法
  • 原文地址:https://www.cnblogs.com/twodog/p/11986177.html
Copyright © 2011-2022 走看看