Vue 父子组件那些事

Vue组件化的特性让页面开发变的很简单，往往开发者一直在处理父子组件之间的业务逻辑关系，这篇博文根据一个小Demo，了解父子组件的用法！

1.组件的概念

组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等

起步

父组件：

<template>
  <div class="parent">
    <p>这里是父组件</p>
  </div>
</template>

<script>
  export default {
    name: "parent",

    data() {
      return {}
    }
  }
</script>

<style scoped>
.parent{
  width: 80%;
  margin: auto;
}
</style>

配置父组件的路由，用于页面展示：

import Vue from 'vue'
import Router from 'vue-router'
import parent from "../components/parent/parent";
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'parent',
      component: parent
    },
  ]
})

启动项目查看效果：

子组件：

<template>
  <div>
    <p>这里是子组件</p>
  </div>
</template>

<script>
  export default {
    name: "child",
    data() {
      return {}
    }
  }
</script>

<style scoped>

</style>

由于子组件在父组件中使用，所以不需要配置路由

2.父组件引用子组件

引用子组件：

<template>
  <div class="parent">
    <p>这里是父组件</p>
    <child></child>
  </div>
</template>

<script>
  import child from "../child/child";
  export default {
    name: "parent",
    components:{child},
    data() {
      return {}
    }
  }
</script>

效果：

3.父组件与子组件实现数据双向绑定

双向绑定的意思就是，数据在父组件里面修改子组件也相应的修改，子组件修改父组件也是

父组件加入如下代码，通过v-model（简写是 ：）绑定childMsg：

<template>
  <div class="parent">
    <p>这里是父组件</p>
    <p>{{parentMsg}}</p>
    <button @click="add">加一</button>
    <child :childMsg="parentMsg"></child>
  </div>
</template>

<script>
  import child from "../child/child";

  export default {
    name: "parent",
    components: {child},
    data() {
      return {
        parentMsg: 1,
      }
    },
    methods: {
      add() {
        this.parentMsg++
      }
    }
  }
</script>

子组件修改代码，增加props属性接收父组件传递参数：

<template>
  <div>
    <p>这里是子组件</p>
    <p>{{childMsg}}</p>
  </div>
</template>

<script>
  export default {
    name: "child",
    props:['childMsg'],
    data() {
      return {

      }
    }
  }
</script>

效果：

4.父组件调用子组件的方法

在子组件里面加上一个清零的方法

<template>
  <div>
    <p>这里是子组件</p>
    <p>{{childMsg}}</p>
    <button @click="clear"> clear</button>
  </div>
</template>

<script>
  export default {
    name: "child",
    props: ['childMsg'],
    data() {
      return {}
    },
    methods: {
      clear() {
        this.childMsg = 0
      }
    }
  }
</script>

父组件通过 this.$refs.xx.xx();方法调用，但是必须要定义子组件的 ref 属性：

<template>
  <div class="parent">
    <p>这里是父组件</p>
    <p>{{parentMsg}}</p>
    <button @click="add">加一</button>
    <button @click="dy">调用子组件方法</button>
    <child :childMsg="parentMsg" ref="child"></child>
  </div>
</template>

<script>
  import child from "../child/child";

  export default {
    name: "parent",
    components: {child},
    data() {
      return {
        parentMsg: 1,
      }
    },
    methods: {
      add() {
        this.parentMsg++
      },
      dy(){
        this.$refs.child.clear()
      }
    }
  }
</script>

效果：

5.子组件调用父组件的方法

子组件通过 this.$emit() 函数调用父组件的 add 方法，让 parentMsg 加1，子组件增加代码：

<template>
  <div>
    <p>这里是子组件</p>
    <p>{{childMsg}}</p>
    <button @click="clear"> clear</button>
    <button @click="dy"> 调用父组件方法</button>
  </div>
</template>

<script>
  export default {
    name: "child",
    props: ['childMsg'],
    data() {
      return {}
    },
    methods: {
      clear() {
        this.childMsg = 0
      },
      dy(){
        this.$emit('Padd')
      }
    }
  }
</script>

父组件新增代码：

<template>
  <div class="parent">
    <p>这里是父组件</p>
    <p>{{parentMsg}}</p>
    <button @click="add">加一</button>
    <button @click="dy">调用子组件方法</button>
    <child :childMsg="parentMsg" ref="child" v-on:Padd="add"></child>
  </div>
</template>

<script>
  import child from "../child/child";

  export default {
    name: "parent",
    components: {child},
    data() {
      return {
        parentMsg: 1,
      }
    },
    methods: {
      add() {
        this.parentMsg++
      },
      dy(){
        this.$refs.child.clear()
      }
    }
  }
</script>

效果：