Vue子组件向父组件传值的几种方式

一. 使用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>