组件之间传值（vue的问题）

父组件传值给子组件 （:messageInfo='message'）

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

例如我们在index.vue中定义一个字段，或者是ajax请求到的数据需要传递给子组的做法如下：

父组件：index.vue:

<template>
    <more :messageInfo='message'></more>
</template>
<script>
  import viewMore from 'viewMore.vue'
  export default {
    name: 'index',
    components: {
	    more: viewMore
	},
    data() {
      return {
	    message: 'hello world'  
      }
    }
  }
</script>

子组件：viewMore.vue

<template>
    <div class="xx">组件</div>
</template>
<script>
  export default {
    name: 'viewMore',
    components: {},
    data() {
      return {
      }
    },
    props: {
        //获取父组件传递的参数
        messageInfo: {
            type: String
        },
      },
  }
</script>
<style  scoped>
	可以定义组件都有的样式
</style>

子组件传值给父组件 （this.$emit('postDataToParentMethod','hello world')）

例如在我们现在需要将子组件中的一个值传递给父组件，平时项目中的情况可能是，在子组件触发一个事件时，或者一个ajax调用完成是需要把数据传递给父组件，我们这里简单的模拟一个点击是事件，做法如下：

子组件：viewMore.vue

<template>
    <div class="xx" @click="postDataToParent">组件</div>
</template>
<script>
  export default {
    name: 'viewMore',
    components: {},
    data() {
      return {
      }
    },
    props: {
        //获取父组件传递的参数
        messageInfo: {
            type: String
        },
      },
    methods: {  
	    postDataToParent: function (event) {  
	      // 给父组件传值 
	     this.$emit('postDataToParentMethod','hello world');
	    }  
  }  
  }
</script>
<style  scoped>
	可以定义组件都有的样式
</style>

父组件获取子组件的值：父组件 index.vue

<template>
	<more :messageInfo='message' @postDataToParentMethod="getData">
	</more>
</template>
<script>
  import viewMore from 'viewMore.vue'
  export default {
    name: 'index',
    components: {
	    more: viewMore
	},
    data() {
      return {
	    message: 'hello world',
	    childData:''
      }
    },
    methods: {
      getDate(data){
        this.childData=data
      }
    }
  }
</script>

我么可以根据实际情况灵活使用子父组件之间的传递值来完成交互。

子组件在父组件中的点击事件

如果需要在父组件中点击子组件，那么需要使用，

@click.native="viewMoreQueryKnowledge()"来触发事件。