父子组件传值

父组件向子组件传值（props）

1.父组件代码如下：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

2.子组件代码

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

子组件向父组件传递数据

    <!-- 通过事件绑定机制，将父组件上的方法传递给子组件,
        子组件通过第二的参数将数据传递给父组件-->
    <!-- 父组件 -->
    <div id="app">
        <tem-app @func="show"></tem-app>
    </div>
 		var vm = new Vue({
         el: "#app",
         methods: {
             show(obj){
                 // 父组件拿到子组件传递过来的数据
                 console.log(obj)
             }
         },
     }) 
     
    <!-- 子组件 -->
    <template id="tem">
        <div>
            <h3>我是子组件</h3>
            <button @click="button">触发父组件传递过来的方法</button>
        </div>
    </template>
    <script>
        var obj = {
            name : '张三',
            age : 12,
            sex : '男'
        }
        Vue.component('tem-app',{
            template : '#tem',
            data : function(){
                return {
                    msg : '我是子组件上的数据'
                }
            },
            methods: {
                button(){
                    // vm.$emit( eventName, […args] ) : 
                    // 触发当前实例上的事件
                    // 参数一，实例[父组件]定义的方法
                    // 参数二，可选的，子组件向父组件传递的数据，可以是多个，
                    this.$emit('func',obj)
                    //  this.$parent.event
                }
            },
        })
    </script>

Tips：当我们无法用this.$parent访问父组件的时候可以用$emit事件来实现子父组件通信。

父组件触发子组件中的方法

子组件：

<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件：

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

参考 Vue子组件调用父组件的方法
拓展————this.$emit和this.$parent.$emit