Vue学习笔记（三）组件间如何通信传递参数

一：父组件向子组件传递参数

<template >
  <div id="app">
    <h1 v-text="title"></h1>
 
    <input type="text" v-model="newItem" @keyup.enter="addNew">
 
    <ul>
      <li v-for="(list,index) in items" :class="{finished: list.isFinished}"  @click="toggleFinish(list)" :key="index" :id="index">
          {{list.label}}
      </li>
    </ul>
 
    <hello2 msgfromfather="今天下大雨了">引入组件</hello2>
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

子组件需要做的事情：

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  props: ['msgfromfather'],
  methods: {
    onClickMe: function () {
      console.log(this.msgfromfather)
    }
  }
}
</script>
 
模板展示
<h2>{{msgfromfather}}</h2>

二：子组件向父组件传递参数