vue关于组件传值

首先先了解组件的嵌套（全局嵌套、局部嵌套）因此传值有3种方式，分别是父-子，子-父

我们先来探讨一下父-子之间的传值：

抛出问题：子组件要获取父组件当中的数据；

我们先倒推：一个普通的组件要获取定义的数据我们看图说话

 

 子组件获取自己本身的数据（name）直接是拿过来{{name}}用；

所以：现在的问题是怎么从不是本身数据拿，

1、在子组件标签自定义一个属性名name1取值为父组件传的值，即：name1='title',

2、在vue实例子组件内部有一个props取属性名然后在直接用{{name1}}就可以拿到父组件的值了

props：上图

 2、子-父之间的传值：子组件数据传到父组件里

首先从两个组件的dom结构与vue中内部组件观察，得知，只有dom里边有父与子的关系，因此利用事件机制的原理，

 

// events EventEmitter    - emit('事件',数据)  on('事件',()＝>)
// Vue.prototype.$emit=EventEmitter.emit

 

在子组件标签内定义一个点击事件来发送给父组件数据，同时在父组件标签内的子组件也自定义一个接受数据的事件。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
    <h2>传值</h2>
    <v-parent></v-parent>
</div>
<template id="parent">
    <div>
        <h3>父组件</h3>
        <p>接受子组件---{{str}}</p>
        <v-child @click='get'></v-child>
    </div>
</template>

<template id="child">
    <div>
        <hr>
        <h2>子组件</h2>
        <p>{{title}}</p>
        <button @click='send()'>发送父组件数据</button>
    </div>
</template>
<!-- 利用事件机制原理，dom里边有父与子的关系，因此应该在dom里边操作，达到传值的目的
1、// events EventEmitter    - emit('事件',数据)  on('事件',()＝>)
// Vue.prototype.$emit=EventEmitter.emit

-->
<script>
    var app =new  Vue({
        el:'#app',
        components:{
          'v-parent':{
            template:'#parent',
            data(){
                return{
                    str:''
                }
            },
            methods:{
                get(msg){//传过来的实参
                    console.log(msg);
                    this.str=msg;
                }
            },
            components:{
                'v-child':{
                    template:'#child',
                    data(){
                        return{
                            title:'我是被发送子组件'
                        }
                    },
                    methods:{
                        send(){
                            this.$emit('send',this.title)
                        }
                    }
                }
            }
           } 
        }
    })
</script>
</body>
</html>

 平行传值：重点代码

兄弟组件之间就需要一个中间值，我在这里称为bus。在vue文件main.js中，我们利用 Vue.prototype.bus=new Vue() 来定义，此时我们就有了一个中间量。
利用$emit发送，$on接收
<button @click="send">点我给兄弟传值</button>
methods: {
    send() {
      this.bus.$emit("toBrother", this.to);
    }
  }

<div>我得到的兄弟组件信息是：{{get}}</div>
export default {
  data() {
    return {
      get: ""
    };
  }
  beforeCreate() {
    this.bus.$on("toBrother", msg => {
      this.get = msg;
    });
  }
};

 

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

　　

 

posted @ 2019-10-23 21:42  浪ANDlang  阅读(411)  评论(0)    收藏  举报