Vue2.0父与子之间通信

<template>
         <div id="app">
                  我是父组件
                 <!-- 子组件标签 -->
                 <zi :inputname="name"></zi>
         </div>
         
</template>

<script>
// 引入子组件
import zi from './zi'
export default {
         // 模块化
         components:{ 
                  zi  //这个是子组件的标签
         },
         data(){
                  return{
                           name:"123"
                  }
         }
}
</script>

<style>

</style>

上面的是父组件

父组件首先要引用子组件

import zi from './zi'

然后components子组件吧它变成标签，这样你就可以在父组件中用标签的形式来使用子组件了，

 components:{ 
                  zi  //这个是子组件的标签
         },

如果我们要传值的话，我们可以在子组件的标签中使用v-bind 或者省略方式写  ：

name我已经在data中定义好了

data(){
                  return{
                           name:"123"
                  }
         }

 <zi :inputname="name"></zi>

下面的子组件

<template>
         <div id="app">
                  我是子组件
                  <!-- 接收到的值 在页面渲染 -->
                  <p>{{inputname}}</p> 
         </div>
</template>

<script>
export default {
         data(){
                  return{

                  }
         },
         props: ['inputname']  //子组件中接收

}
</script>

<style>

</style>

子组件中我们可以用props来接收父组件传来的值

 props: ['inputname']  //子组件中接收

并且接收到以后 我们在进行页面上的渲染

 <p>{{inputname}}</p> 

成功接收值以后在页面渲染

父组件与子组件间通信就是这么简单