vue.js常用的传值方式：父传子，子传父

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息

1.父组件像子组件进行传值

父组件：

<template>
  <div class="hello">
    <child :inputValue = 'value'></child>
  </div>
</template>
<script>
import child from './child'
export default {
  data () {
    return {
      value:'我是父组件的value'
    }
  },
  components:{child}
}
</script>

子组件：

    <template>
       <div>
          <span>{{inputValue}}</span>
       </div>
    </template>
    <script>
    export default {
       props:{
           inputValue:String
       }
    }

父组件向子组件传值成功
总结一下：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

2. 子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

<template>
    <div>
        <h3>child子组件部分</h3>
        <p>{{message}}</p>
        <button @click="sendTOParent">向父组件传值</button>
    </div>
</template>
<script>
export default {
    props:['message'],
    data(){
        return{
            data:'this message from child'
        }
    },
    methods:{
        sendTOParent(){
            this.$emit('listenToChildEvent',this.data)
        }
    }
    
}
</script>

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
    <div>
        <son v-bind:message = 'parentMsg' v-on:listenToChildEvent = 'showMsgfromChild'></son>
    </div>
</template>
<script>
import son from './son'
export default {
    data(){
        return {
            parentMsg:'hello,child'
        }
    },
    methods:{
        showMsgfromChild(data){
            console.log(data)
        }
    },
    components:{son}

}
</script>

子组件向父组件传值成功
总结一下：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听