vue之父子组件之间传值

首先说一下父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。下面详细说一下，父子组件之间怎么传值。

先说一下父组件引入子组件的方法。

1.组件传值-父组件向子组件传值

第一步：父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用 

父组件：father-tag.vue

<template>
    <div class="parent">
      <h3>父组件</h3>
      <!--使用子组件-->
      <son-tag :fData="data1" :fMessage="data2"></son-tag>
    </div>
</template>
<script>
  //引入子组件
  import sonTag from "./son-tag.vue"
    export default {
      name:'parentTag',
      components:{
        sonTag
      },
      data(){
        return{
          data1:"父组件数据data1",
          data2:"父组件数据data2"
        }
      }
    }
</script>
<style>
</style>

第二步：把父组件传递过来的数据， 在 子组件的props数组 中定义一下

1. 组件中的 所有props 中的数据，都是通过父组件传递给子组件的

2.  props 中的数据都是只读的，无法重新赋值

第三步：在该子组件中使用props数组 中定义好的数据

子组件：son-tag.vue

<template>
    <div class="son">
      <h3>子组件</h3>
      <p>下面是父组件传递过来的数据：</p>
      <p>第一个数据：{{fData}}</p>
      <p>第二个数据：{{fMessage}}</p>
    </div>
</template>
<script>
    export default {
      name:"sonTag",
      props:["fData","fMessage"],
      data(){
        return{}
      }
    }
</script>
<style>
</style>

方法2：通过provide和inject实现从父组件向子组件传值

父组件：

<template>
    <div class="parent">
      <h3>父组件</h3>
      <!--使用子组件-->
      <son-tag></son-tag>

    </div>
</template>
<script>
  //引入子组件
  import sonTag from "./son-tag.vue"
    export default {
      name:'parentTag',
      components:{
        sonTag
      },
      data(){
        return{
          data1:"父元素数据1",
          data2:"父元素数据2"
        }
      },
      provide(){
       return{
         "instance":this
       }
      }
    }
</script>
<style>
</style>

子组件：

<template>
    <div class="son">
      <h3>子组件</h3>
      <p>父元素传过来的数据1：{{instance.data1}}</p>
      <p>父元素传过来的数据2：{{instance.data2}}</p>
    </div>
</template>
<script>
    export default {
      name:"sonTag",
      data(){
        return{

        }
      },
      inject:["instance"]
    }
</script>
<style>
</style>

方法3：通过$refs实现从父组件向子组件传值

父组件

<template>
    <div class="parent">
      <h3>父组件</h3>
      <!--使用子组件-->
      <son-tag ref="son"></son-tag>
      <button @click="parentClick">给子元素传值</button>
    </div>
</template>
<script>
  //引入子组件
  import sonTag from "./son-tag.vue"
    export default {
      name:'parentTag',
      components:{
        sonTag
      },
      data(){
        return{
        }
      },
      methods:{
        parentClick(){
          this.$refs.son.msg="Hello world";
        }
      }
    }
</script>
<style>
</style>

子组件：

<template>
    <div class="son">
      <h3>子组件</h3>
      <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
      name:"sonTag",
      data(){
        return{
          msg:""
        }
      },
    }
</script>
<style>
</style>

2.组件传值-父组件把方法传递给子组件

第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件

父组件：father-tag.vue

<template>
    <div class="parent">
      <h3>父组件</h3>
      <!--使用子组件-->
      <son-tag @show="showFather"></son-tag>
      <p>子组件传来数据1：{{data1}}</p>
      <p>子组件传来数据2：{{data2}}</p>
    </div>
</template>
<script>
  //引入子组件
  import sonTag from "./son-tag.vue"
    export default {
      name:'parentTag',
      components:{
        sonTag
      },
      data(){
        return{
          data1:"",
          data2:""
        }
      },
      methods:{
        showFather(a,b){//触发子组件方法   把子组件的值传过来
          console.log("触发了父组件的方法====="+a+"======"+b);
          this.data1=a;
          this.data2=b;
        }
      }
    }
</script>
<style>
</style>

第二步：在子组件中定义一个方法，在方法中，利用  $emit  触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数

第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了 并通过方法向父元素传值

子组件：son-tag.vue

<template>
    <div class="son">
      <h3>子组件</h3>
     <button @click="sonClick">触发父组件方法</button>
    </div>
</template>
<script>
    export default {
      name:"sonTag",
      data(){
        return{
          msg:"hhh",
          data:"111"
        }
      },
      methods:{
        sonClick(){
          console.log("sonclick");
          this.$emit("show",this.msg,this.data);
        }
      }
    }
</script>
<style>
</style>