vue组件传参

1、父传子

在父组件通过import引入子组件，在父组件中通过v-bind绑定属性，在子组件中通过props获取绑定的属性，可以是数组，也可以是对象。

父组件：

<template>
  <div class="home">
    <about :info='info'/>
  </div>
</template>

<script>
import About from './About.vue'
export default {
  name: 'Home',
  data() {
    return {
      info: {
        name: '小明',
        age: 19
      }  
    }
  },
  components: {
    About
  }
}
</script>

子组件：

<template>
  <div class="about">
    {{info.name}}
  </div>
</template>

<script>
export default {
  props:['info']
}
</script>

子组件获取的数据不可修改，只能在父组件修改

2、子传父

子组件里面绑定一个方法，在这个方法里面用$emit()传出，$emit（函数名，传递的参数）里面的参数是父组件中定义的一个方法名称以及参数，父组件里面通过v-on接收这个参数，然后进行使用

子组件：

<template>
  <div @click='dian'>child</div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        name: '小明',
        age: 19
      }  
    }
  },
  methods:{
    dian(){
      this.$emit('chuan',this.info)
    }
  }
}
</script>

父组件：

<template>
  <div class="home">
    <about @chuan='zhi'/>
  </div>
</template>

<script>
import About from './About.vue'
export default {
  name: 'Home',
  components: {
    About
  },
  methods:{
    zhi(data){
      console.log(data.name);
    }
  }
}
</script>

3、vuex

在vuex的state里面创建数据，需要修改数据在组件里通过this.$store.commit()在mutations里面修改，通过this.$store.state获取数据：

vuex:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    info: {
      name: '小明',
      age: 19
    }  
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

组件：

<template>
  <div class="home">
    {{this.$store.state.info.name}}
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

总结：

到这里，我就介绍完了，祝大家生活愉快