vue--组件之间传值

一、父组件给子组件传值

1. 子组件（Logo.vue）在props中创建一个用来接收父组件传来的值的属性（logoName）
2. 在父组件（Dad.vue）中注册子组件，并在子组件标签中添加子组件中创建的属性
3. 把要传给子组件的值（nameOfLogo）赋给该属性（logoName）

子组件：

<template>
  <div class="logo" @click="show(logoName)">
  </div>
</template>

<script>
export default {
  name: 'Logo',
  data () {
    return {
    }
  },
  props: ['logoName'],
  methods: {
    show (msg) {
      console.log('logoName', msg)
    }
  }
}
</script>
<style scoped>
</style>

父组件：

<template>
  <div>
    <Logo :logoName="nameOfLogo"></Logo>
  </div>
</template>

<script>
import Logo from '../components/Logo'
export default {
  name: 'Dad',
  data () {
    return {
      nameOfLogo: 'logo滴名字'
    }
  },
  components: {
    Logo
  }
  }
}
</script>
<style scoped>
</style>

在Dad.vue的页面上点击logo组件：

二、子组件给父子间传值

1. 子组件中点击事件等方法来触发一个自定义事件
2. 自定义事件中使用this.$emit()方法，传递两个参数，第一个是父组件绑定的方法名，第二个参数是要传递的参数
3. 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

子组件：

<template>
  <div class="logo" @click="toDadData()">
  </div>
</template>

<script>
export default {
  name: 'Logo',
  data () {
    return {
    	msg: '子组件logo给Dad传的文本'
    }
  },
  methods: {
    show () {
      this.$emit('func', this.msg)
    }
  }
}
</script>
<style scoped>
</style>

父组件

<template>
  <div>
    <Logo @func="getName"></Logo>
  </div>
</template>

<script>
import Logo from '../components/Logo'
export default {
  name: 'Dad',
  data () {
    return {
      nameOfLogo: 'logo滴名字'
    }
  },
  methods： {
    getName (msg) {
      let logoTest =  msg
      console.log(logoTest)
    },
  }
  components: {
    Logo
  }
  }
}
</script>
<style scoped>
</style>

在Dad.vue的页面上点击logo组件：

三、两个子组件A、B之间传值需要先从子组件A向父组件传值，再由父组件向子组件B传值。

四、通过route带参传递，详见：https://blog.youkuaiyun.com/she_jw/article/details/105951285

五、通过vue的转台管理工具vuex传值（很方便）