Vue 组件之间传值

一、父组件向子组件传递数据
在 Vue 中，可以使用 props 向子组件传递数据。
例如父组件Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
 <Child :msg='msg' :toChildFun='toChildFun'/>
  </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
  name: "Home",
  data() {
    return {
      msg:'我是父组件传给子组件的值msg'
    };
  },
  mounted() {
    
  },
  components: {Child},
  methods:{
    toChildFun(){
      alert('这是父组件传给子组件的方法')
    }
  }
};
</script>

在子组件中用props来获取父组件中传来的值。

<template>
  <div>
      <h1>我是子组件</h1>
      <h2>这是父组件传来的值---{{msg}}</h2>
      <button @click='toChildFun'>触发父组件传来的方法</button>
  </div>
</template>
<script>
export default {
    props:{
        msg:{
            type:String, //规定传来值的类型
            required:true,//是否必传
            default:'我是默认字符串' //不传时，默认的值
        },
        toChildFun:{
            type:Function
        }
    }
};
</script>

二、子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
例如现在在子组件中实时把输入框输入的值传递给父组件，

<template>
  <div>
      <h1>我是子组件</h1>
      <input v-model='username' @input='setUser'/>
  </div>
</template>
<script>
export default {
    data(){
        return{
            username:''
        }
    },
    methods:{
        setUser(){
            //触发transFather事件，把username传递给父组件
            this.$emit('transFather',this.username)
        }
    }
};
</script>

父组件中

<template>
  <div class="home">
    <h1>我是父组件,这是子组件传给我的值----{{username}}</h1>
    <img alt="Vue logo" src="../assets/logo.png" />
 <Child @transFather='getUser'/>
  </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
  name: "Home",
  data() {
    return {
      username:''
    };
  },
  mounted() {
    
  },
  components: {Child},
  methods:{
    getUser(msg){
      this.username = msg
    }
  }
};
</script>