通过props实现父组件向子组件传递数据：

App组件中包含list数据，要把App中的list数据传递给List子组件，并由子组件展示到页面中。

父组件APP:

<template>
    <div>
        <MyList :list="list"/>    //Mylist组件绑定data中的list
    </div>
</template>

<script>
import MyList from './components/List.vue'   

export default {
    components: { MyList},
    data() {
	return {
	    list: [
	        {
		    id: 1,
		    title: 'a1'
		},
               {
		    id: 2,
		    title: 'a2'
		}
	    ]
	}
    },		
}
</script>

子组件MyList：

<template>
  <div>
    <ul>
      //遍历list并展示
      <li v-for="item in list" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  //通过props接收App中的list数据，指定类型为数组
  props:{
    list: Array
  }
}
</script>

通过$emit实现子组件向父组件传递数据：

在MyInput子组件中，通过在输入框输入数据并点击添加按钮把输入的数据保存到App的list中。

子组件MyInput：

<template>
  <div class="input">
    <input type="text" v-model="title">    //绑定input框中的title数据
    <button @click="add">添加</button>    //添加按钮点击事件回调add
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    }
  },
  methods: {
    //通过add方法中的$emit把title发送出去
    add() {
      this.$emit('add', this.title)
    }
  }
}
</script>

App：

<template>
    <div>
        <MyInput @add="add"/>    //监听MyInput的add
    </div>
</template>

<script>
import MyInput from './components/Input.vue'  

export default {
    components: { MyInput},
    data() {
	return {
	    list: [
	        {
		    id: 1,
		    title: 'a1'
		},
               {
		    id: 2,
		    title: 'a2'
		}
	    ]
	}
    },	
    methods: {
        //接收到add中的title后把title添加到list中
	add(title) {
	    this.list.push({
	        id: Math.random(),    //使用随机数作为id
		title
	    })
        }
    },	
}
</script>

MyInput组件把输入框的内容传递给App之后，App中list数据增加，自然也会传递给MyList组件并展示到页面上。

完整App：

<template>
    <div>
        <MyInput @add="add"/>    //监听MyInput的add
        <MyList :list="list"/>
    </div>
</template>

<script>
import MyInput from './components/Input.vue'  
import MyList from './components/List.vue'

export default {
    components: { MyInput， MyList},
    data() {
	return {
	    list: [
	        {
		    id: 1,
		    title: 'a1'
		},
               {
		    id: 2,
		    title: 'a2'
		}
	    ]
	}
    },	
    methods: {
        //接收到add中的title后把title添加到list中
	add(title) {
	    this.list.push({
	        id: Math.random(),    //使用随机数作为id
		title
	    })
        }
    },	
}
</script>