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


文章目录

  • 1.组件的概念
  • 起步
  • 2.父组件引用子组件
  • 3.父组件与子组件实现数据双向绑定
  • 4.父组件调用子组件的方法
  • 5.子组件调用父组件的方法


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
    },
  ]
})

启动项目查看效果:

vue elementUI 属性表格父子关联 vue中父子组件_vue


子组件:

<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>

效果:

vue elementUI 属性表格父子关联 vue中父子组件_g++_02

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>

效果:

vue elementUI 属性表格父子关联 vue中父子组件_g++_03


vue elementUI 属性表格父子关联 vue中父子组件_Vue_04

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>

效果:

vue elementUI 属性表格父子关联 vue中父子组件_g++_05

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>

效果:

vue elementUI 属性表格父子关联 vue中父子组件_g++_06


vue elementUI 属性表格父子关联 vue中父子组件_Vue_07