Vue父子组件通讯（一）

时间 2019-12-10

标签 vue 父子组件通讯繁體版

原文原文链接

父子组件通讯的场景不少，例如：javascript

父 -> 子：页面上(父)有两个自定义按钮(子)，每一个按钮的颜色不同；css

子 -> 父：点击页面(父)上按钮(子)，页面(父)上一个数字发生了递增html

父 -> 子

咱们以上面讲到的自定义按钮为例子来讲明父组件如何调用子组件。vue

自定义按钮

定义一个自定义按钮组件:wds-button。若是想使用它，能够在html中这么写：java

<wds-button><wds-button>

获得的效果以下：app

具体实现逻辑：函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style scoped>
        .wds-button{
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #bfcbd9;
            color: #1f2d3d;
            outline: none;
            margin: 0;
            padding: 10px 15px;
            font-size: 14px;
            border-radius: 4px;
        }
    </style>
</head>

<body>
<div id="app">
    <wds-button></wds-button>
</div>
</body>

<template id="template-wds-button">
    <button class="wds-button">默认按钮</button>
</template>

<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script>
    var wdsButton = {
        template: '#template-wds-button'
    }

    var vm = new Vue({
        el: '#app',
        components: {
            'wds-button': wdsButton
        }
    })

</script>
</html>

多个不一样颜色的自定义按钮

若是咱们想实如今页面上显示两个不一样颜色自定义按钮呢？咱们可能但愿经过以下的方式来使用这个自定义按钮，来实现效果。spa

<wds-button color="red"></wds-button>
<wds-button color="yellow"></wds-button>

若是说wds-button是子组件，那么使用该组件的当前页面则为父组件。这里的color是子组件的自定义属性名（由于用法和html的标签属性的用法一致），而"red"、"yellow"是父组件传递给子组件的值。相似于函数的形参和实参。3d

所以若是按照上面的那种调用组件的方法，总结一下：code

子组件得拥有一个自定义的属性：color;

父组件经过子组件(wds-button)中的自定义属性名(color)，能够将不一样的值(red/yellow)传递给子组件，从而达到复用子组件的效果。

那具体在代码层面如何实现呢？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style scoped>
  .wds-button{
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #bfcbd9;
    color: #1f2d3d;
    outline: none;
    margin: 0;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
  }
  .wds-button--red{
    background: red;
  }
  .wds-button--yellow{
    background: yellow;
  }
  </style>
</head>
<body>
  <div id='app'>
    <wds-button></wds-button>
    <wds-button color="red"></wds-button>
    <wds-button color="yellow"></wds-button>
  </div>
</body>

<template id='template-wds-button'>
  <button v-bind:class="[color ? 'wds-button wds-button--' + color: 'wds-button']">默认按钮</button>
</template>

<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script>
var wdsButton = {
  props: {
    color: {
      type: String,
      default: ''
    }
  },
  template: '#template-wds-button'
}

var vm = new Vue({
  el: '#app',
  components: {
    'wds-button': wdsButton
  }
})
</script>
</html>

这里子组件的JS对象中须要申明一个属性(props)，告知调用者暴露的自定属性名字是什么（这里props里又一个属性color），同时给出对应的类型和默认值（type & default）。

var wdsButton = {
  props: {
    color: {
      type: String,
      default: ''
    }
  },
  template: '#template-wds-button'
}

同时在视图模版中，给自定义按钮绑定一个css class，其值由属性color的值来定。

<template id='template-wds-button'>
  <button v-bind:class="[color ? 'wds-button wds-button--' + color: 'wds-button']">默认按钮</button>
</template>

按照上面的方式来，就实现了一个可以传入颜色属性的自定义的组件按钮。同时这个wds-button组件能够拥有了了一份属于它本身的相似于接口的文档:

Props

参数	说明	类型	可选值	默认
color	按钮颜色	String	red/color	—