父组件index，子组件question，
 
 下图的对话框，对话内容socketOptions是定义在父组件中的，对话框的内容，都是通过websocket推送过来的，
 
 
现在在子组件中，通过网络请求，拿到问答信息，想要放到对话框里，就需要用到vue的子组件向父组件传值，大概分为2步
 
一、在子组件中自定义事件
 
在子组件中要做的工作只是，使用this.$emit()命令来自定义一个事件。该命令可以传递多个参数：
 
第一个参数是自定义事件的名字，是必须的，
 后面的参数是从子组件传递给父组件的数据，是可选的。要传递几个数据，就将这几个数据作为参数放进该命令中。
 例如，在子组件中自定义一个getAns事件，通过该事件向父组件传递两条数据，问题和答案，如下：
 
 
二、在父组件中注册该事件，并绑定父组件中的方法，接收数据
 
在子组件中完成自定义事件之后，我们就可以在父组件中注册该事件，并绑定到父组件中的一个方法，在该方法中，接收子组件中传递过来的数据。
 首先、父组件肯定要注册子组件、这个就不说了
 
父组件中用到了子组件的地方，注册子组件中的getAns事件，绑定receive方法
 
 在父组件中的methods里面实现receive方法，把子组件中的参数赋给socketOptions，就能展示了
 
 如图：
 
 
写的比较乱，这里附上参考的链接：Vue笔记——子组件向父组件传递数据

子组件向父组件，使用$emit方法，demo：
 
子组件的代码：
 
<template>
    <div>
        <h1>this is child component</h1>
        <button @click="toParent">向父组件传值</button>
    </div>
</template>


<script>
export default {
    data() {
        return {
            data1: '子组件的数据'
        }
    },
    methods: {
        toParent:function() {
            this.$emit('event1', this.data1)
        }
    }
}
</script>

<style scoped>
    div {
        border: 1px solid red;
    }
</style>
 
父组件的代码：
 
<template>
    <div>
        {{ newData }}
        <child @event1="change($event)"></child>
        
    </div>
</template>


<script>
import child from './child'
export default {
    data() {
        return {
            newData: '这是父组件的数据'
        }
    },
    methods: {
        change(data) {
            this.newData = data;
        }
    },
    components: {child}
}
</script>

<style>

</style>
 
代码解释：
 
1、在子组件中，首先需要使用$emit方法，该方法接收2个参数，第一个参数是事件的名称，自己随意定义。第二个参数是需要传递的数据，可以是对象，也可以是字符串类型。$emit是VUE实例中的一个方法，所以前面要加上this，可以在钩子函数中执行，也可以由某个事件触发执行。
 
2、在父组件中，程序会查找刚才在子组件中注册的事件名，该事件又有一个方法change，change方法将newData的值改变了。
 
 
 
传值之前：
 
 
传值之后：
 
 
 
 
 
 
 
 
 
 
 

ps：写给自己看的，有问题留言
 一，子组件主动触发事件将数据传递给父组件
 1，在子组件上绑定某个事件以及事件触发的函数
 子组件代码
 
<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>

<Button type="success" @click="submit"></Button>
</div>
  
</template>
 
事件在子组件中触发的函数
 
      submit(){
        this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
      },
 
2，在父组件中绑定触发事件
 
<AuthTree  @getTreeData='testData'>
</AuthTree>
 
父组件触发函数显示子组件传递的数据
 
testData(data){
      console.log("parent");
      console.log(data)
    },
 
控制台打印的数据
 
 二，不需要再子组件中触发事件（如点击按钮，create（）事件等等）
 这种方式要简单得多，
 1，子组件中绑定ref
 
<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>
</div>
  
</template>

 
然后在子组件中定义一个函数，这个函数是父组件可以直接调用的。函数的返回值定义为我们需要的数据。
 
getData(){
        return this.$refs.treeData.getCheckedNodes()
    },

 
然后再父组件注册子组件后绑定ref，调用子组件的函数获取数据
 
<AuthTree ref="authTree">
          </AuthTree>
 
父组件函数调用
 
console.log( this.$refs.authTree.getData());

一. 使用slot插槽
 
1.子组件：
 
<template>
  <div>
    <slot name="icon" :text="text"></slot>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        text:"我是子组件"
      }
    }
  }
</script>
 
2.父组件：
 
<template>
  <div id="app">
    <child>
      <div slot="icon" slot-scope="props">
        {{props.text}}
      </div>
    </child>
  </div>
</template>
 
在父组件中 通过slot 便能获取子组件的text值
 
二.使用ref属性
 
1.子组件：
 
<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  }
}
</script>
 
2.父组件：
 
<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }
  }
};
</script>
 
父组件中通过$.refs便可以获取子组件传来的值。
 
三.使用$.emit
 
1.子组件：
 
<template>
  <div id="translate-form">
      <form>
          <input type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
          <select>
              <option value="en">English</option>
          </select>
          <input type="submit"  value="翻译"  v-on:click="formSubmit">
    </form>
  </div>
</template>

<script>
export default {
  name: 'TranslateForm',
  data:function(){
      return{
          textToTranslate:'',
      }
  },
  methods: {
      formSubmit: function(e){
          this.$emit('formSubmit', this.textToTranslate); //父组件监听的名字必须是formSubmit
          e.preventDefault();
      }
  }
}
</script>
 
2.父组件：
 
<template>
  <div id="app">
      <h1>在线翻译</h1>
    <h5>简单 / 易用 / 便捷</h5>
   <TranslateForm v-on:formSubmit='translateText'></TranslateForm>
  </div>
</template>

<script>
import TranslateForm from './components/TranslateForm'

export default {
  name: 'App',
  components:{
      TranslateForm
  },
  methods:{
      translateText:function(text){
          alert(text)
      }
  }
}
</script>