vue.js组件传值

新建child.vue，在App.vue中添加：

<child fatherCall="where are you , my son"></child>

import child from './components/child'

components: {
    child
  }

这样App.vue是child.vue的父组件，可以看到，在child标签中：fatherCall=”where are you , my son”，fatherCall是我们希望传递到child的，它的值为“where are you , my son”。

在child.vue中如何去接受fatherCall呢？vue中使用了props，在child.vue中添加代码：

props:["fatherCall"]

这样，fatherCall可以在child.vue中随时使用，通过this.fatherCall访问。

如果传递的值是一个对象，如：

fatherMgs:[
          {
              index: 1,
              mgs: "this the first mgs"
          },
          {
            index: 2,
            mgs: "this the second mgs"
          },
          {
            index: 1,
            mgs: "this the third mgs"
          },
        ]

这时需要用到v-bind：

<child  v-bind:fatherMgs="fatherMgs"></child>

同样child.vue中通过props接受数据：

props:["fatherMgs"]

循环读取fatherMgs

<li v-for="item in fatherMgs">{{item.index}}.{{item.mgs}}</li>

2.子组件向父组件传值
主要使用vue中的emit，官方解释：触发当前实例上的事件。附加参数都会传给监听器回调。反正看不懂什么意思，直接拿来用。
首先在child.vue中添加代码：

<button v-on:click="sendMgsToFather">发消息给父亲</button>

当点击按钮时，调用函数sendMgsToFather：

sendMgsToFather:function () {
        this.$emit("listenToChild","I'm watching TV")
    }

这时可以理解为child.vue，告诉App.vue，我触发了listenToChild事件，参数值为“I’m watching TV”。
这时App.vue中的child.vue组件为：

<child v-on:listenToChild="listenToChildFun"></child>

表示当出发时间listenToChild时，会调用函数listenToChildFun，参数就是之前传过来的I’m watching TV”。

listenToChildFun:function (childCall) {
      //处理...
    }