zoukankan      html  css  js  c++  java
  • vue 组件间传值

    1、父组件给子组件传值

    父组件:

    
    <template>
       <child :name="name"></child>
    </template>
    <script>
    import child from "./child.vue"
      export default {
         components: {child},
         data(){
          return {name:"二哈"}
         }
      }
    </script>
    

    子组件:

    
    <template>
      <div>{{name}}</div>
    </template>
    <script>
      export default {
        props:["name"]
      }
    </script>
    

    2、子组件给父组件

    父组件:

    
    <template>
      <child @childToParent="reviceSondata"></child>
    </template>
    <script>
    import child from "./child.vue"
      export default {
        components: {child},
        methods:{
          reviceSondata(data){
            console.log(data);
          }
        }
      }
    </script>
    

    子组件:

    
    <template>
       <button @click="dataTofather">点击</button>
    </template>
    <script>
      export default {
        data () {
          return {
            message: '啦啦啦啦'
          }
        },
        methods:{
          dataTofather(){
            this.$emit("childToParent",this.message,true);
          }
        }
      }
    </script>
    

    3、vuex

    store.js:

    
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      // 定义状态
      state: {
        headImg: JSON.parse(sessionStorage.getItem('headImg')) || ""
      },
      mutations: {
        newImg(state, msg){
          sessionStorage.setItem('headImg', JSON.stringify(msg))
          state.headImg = msg;
        }
      }
    })
    
    export default store
    

    main.js中引入vuex

    
    import Vue from 'vue';
    import Vuex from 'vuex';
    import store from './vuex/store';
    Vue.use(Vuex);
    var v = new Vue({
      el: '#app',
      router,
      store,
      components: {index},
      template: '<index/>',
      created: function () {
    
      }
    })
    

    传值:this.$store.commit("newImg", value);
    取值:this.$store.state.headImg

    github地址:vue传值

    原文地址:https://segmentfault.com/a/1190000017362027

  • 相关阅读:
    索引访问中的access和filter
    分页SQL走全表扫描导致TEMP耗尽
    多表关联的分页SQL经典案例
    分页技术COUNT STOPKEY和SORT ORDER BY
    FILTER再来一例
    错误的选择了HASH JOIN!
    dojo加载树报错
    dojo中获取表格中某一行的某个值
    dojo处理删除操作报错
    分页语句优化
  • 原文地址:https://www.cnblogs.com/lalalagq/p/10114258.html
Copyright © 2011-2022 走看看