1组件之间数据的传递——父传子

在这里我们把根组件当做父组件,Son是子组件。

步骤

1.在父组件中，正常定义自己的数据。

<div id="app">
    <p>我是父组件中的数据{{f}}</p>
</div>
let vm = new Vue({
    el:"#app",
    data:{
        f:100,
    },
    components:{
        Son
    }
});

2.在父组件的模板中通过属性绑定把数据绑到子组件上。

<div id="app">
    <p>我是父组件中的数据{{f}}</p>
    <hr />
    <son :sonvalue="f"></son>
</div>

3.在自组件中通过定义prrops属性，来接收父组件传递的数据。

let Son = {
    template:"#son",
    proos:{
        sonvalue:Number
    }
}

，在props中定义的属性，是专门用来从父组件中获取数据的。

4.在子组件模板中使用数据

<template id="son">
    <div>
        <h2>我是子组件，引用父组件中的数据:{{sonvalue}}</h2>
    </div>
</template>

我们还可以在子组件中的函数中使用数据

在子组件中，接收父组件的数据后，你可以用这个数据对自已子组件中定义的数据项去做初始化，然后，你就可以去自己自己在子组件中定义的数据。

Props

我们在使用props来接收数据时，每一个数据都可以加三个属性设置来修饰它。例如：

props：{
    sonvalue:{
        type:   ;
        default:   ;
        required:   ;
    }
}

type:类型。指明从父组件中传递过来的数据必须是什么类型。它的取值是:Object,Array,String,Number,Boolean 都是构造器。不要写成字符串。

default://默认值。当父组件没有传数据时，就用这个值。

required:true/false 。是否必须一定要传递过来。

总之，数据的父传子,就是一，父中有数据；二，在父组件中通过数据绑定把数据绑到子组件中；三，在子组件中定义props属性，来接收父中数据；四，在子组件中就可以使用了。

组件中的数据传递——子传父

步骤
1.在父组件中的子组件上添加事件监听

<body>
  <div id="app">
      <h1>父组件</h1>
      <!--给组件添加一个事件监听-->
      <!--submitmsg是一个事件-->
      <!--子组件会发射一个事件，事件发生时会触发addmsg函数-->
      <!--addmsg是父组件的函数-->
      <son @submitmsg="addmsg"></son>
  </div>
  <template id="son">
      <div>
          <h3>子组件</h3>
          <button @click="fashe">发射</button>
      </div>
  </template>
</body>

<script>
  let Son = {
      template:"#son",
      data(){
          return{
          },
      }
  },
  let vm = new Vue({
      el:"#app",
      data:{
              a:0,
      },
      compontents:{
              Son
      },
  })
</script>

2.在子组件中，某个时间通过this.$emit发出这个事件，发出事件的同时就可以携带数据了。

template: "#son",
        data() {
            return {
               txt:"123456"
            }
        },
        methods: {
            fashe() {
        this.$emit("submitmsg",this.txt)
            }
        }

3.当事件发射时，在父组件中会自动触发“addmsg”方法

methods: {
            addmsg(info) {
                this.a = info
            }
        }

总结:

1.在子组件上添加一个事件监听<son @submitmsg="addmsg"></son>
2.子组件通过this.$emit发出这个事件，同时可以携带数据,

this.$emit("submitmsg"，123456)

3.当子组件发出这个事件时，父组件会自动触发一个方法

组件之间的数据通信

1组件之间数据的传递——父传子

Props

组件中的数据传递——子传父