zoukankan      html  css  js  c++  java
  • vue组件间的数据传递

    父组件向子组件传递数据

    在 Vue 中,可以使用 props 向子组件传递数据。

     
    App.vue
    HelloWorld.vue

    在子组件部分:

    如果需要从父组件获取 logo 的值,就需要使用 props: ['logo']

    在父组件部分

    在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg

    然后就能将App.vue中 logoMsg 的值传给 header.vue 了

    子组件向父组件传递数据

     
    Hom.vue
    App.vue

    子组件主要通过事件传递数据给父组件

    在子组件:

    <template>
     <div class="home">  
         <div class="name">
           <label>
             <span>请输入:</span>
             <input v-model="username" @change="setUser" />
           </label>
         </div>
     </div>
    </template>
    //当<input>的值发生变化的时候,将 username 传递给 App.vue,
    首先声明一个了方法 setUser,用 change 事件来调用 setUser
    <script>
    
    export default {
     name: "name",
     data() {
       return {
         username: ''
       };
     },
     methods: {
       setUser: function() {
         this.$emit('transferUser',this.username)
       }
     }
    }
    </script>
    //在 setUser 中,使用了 $emit 来遍历 transferUser 事件,并返回 this.username
    
    
    其中 transferUser 是一个自定义的事件,功能类似于一个中转,this.username 将通过这个事件传递给父组件 
    

    父组件部分

    <template>
      <!-- 组件 -->
      <!-- <router-view></router-view> -->
      <div id="app">
        <div>
          <p>名字为:{{user}}</p>
          <NameDiv @transferUser="getUser"></NameDiv>
        </div>
      </div>
    </template>
    //在父组件 App.vue 中,声明了一个方法 getUser,
    用 transferUser 事件调用 getUser 方法,获取到从子组件传递过来的参数 username
    
    <script>
    // 导入组件
    import HelloWord from "./components/HelloWorld.vue";
    import NameDiv from "./views/Home";
    export default {
      name: "app",
      data() {
        return {
          user: "",
        };
      },
      methods: {
        getUser(msg) {
          this.user = msg;
        }
      },
      //注册组件
      components: {
        NameDiv
      }
    };
    //getUser 方法中的参数 msg 就是从子组件传递过来的参数 username
    </script>
    <style>
    </style>

    结果如图:

    子组件与子组件间数据传递

    状态管理工具vuex

    作者:SaberInoryKiss

    出处:SaberInoryKiss的博客--https://www.cnblogs.com/SaberInoryKiss

    您的支持是对博主最大的鼓励,感谢您的认真阅读。

    本文版权归作者所有,欢迎转载,但请保留该声明。

  • 相关阅读:
    报表
    重构改善既有代码设计--重构手法02:Inline Method (内联函数)& 03: Inline Temp(内联临时变量)
    重构改善既有代码设计--重构手法01:Extract Method (提炼函数)
    httpclient 学习
    JAVA中反射机制六(java.lang.reflect包)
    JAVA中反射机制五(JavaBean的内省与BeanUtils库)
    JAVA中反射机制四
    JAVA中反射机制三
    JAVA中反射机制二
    JAVA中反射机制一
  • 原文地址:https://www.cnblogs.com/SaberInoryKiss/p/11778056.html
Copyright © 2011-2022 走看看