补充：父组件给子组件传值以及子组件向父组件传值

参考：https://segmentfault.com/a/1190000011882494

父组件向子组件传数据

父组件中data中定义传输的值，如todoLists:[],

在标签中绑定：:新定义的名字="data中定义的数据名字"，如:todolist1="todoLists"

子组件中props:['新名字'],如prop:['todolist1']，这样，在子组件需要的地方利用todolist1就达到传值的目的

父组件：

 import Page1 from './components/page1'
 export default {
  name: 'app',
  components:{
    'page1':Page1
  }

子组件：

<div class="hello">
    <h2>{{text}}</h2>
  </div>

export default {
  name: 'hello',
  props:['text'],
  data () {    
  }

子组件向父组件传值

子组件中，在methods利用$emit将值传给父组件，如this.$emit('whshow',this.whichshow)

父组件中，在子组件标签中加一个监听，如v-on:whshow="getwhshow"，然后在methods中添加方法，getwhshow(msg) {this.fashow=msg}

子组件：

 <input type="text" @change="setUserName" v-model="username" placeholder="请输入用户名">
    
 export default {
  name: 'hello',
  props:['text'],
  data () {
    return {
      msg: '世界',
      username:''
    }
  },
  methods:{
    setUserName:function () {
      this.$emit('outPutName',this.username);
    }
  }
}

父组件：

<page1 :text="text" @outPutName="getUserName"></page1>

  methods:{
    getUserName:function (msg) {
      this.username = msg;
    }
   }

同级组件间传递：

利用子组件1传值给父组件，父组件再传值给子组件2