首页 > 其他分享> > vue父子组件通信【案例详解】

vue父子组件通信【案例详解】

2021-07-04 15:31:25 作者：互联网

父组件向子组件通信

父组件想要对子组件通信，通过子组件中的props来进行通信

props

类型：Array | Object

详细：

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项：

type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator：Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

简单的事例：
基本结构

  <div id="app">
    <cpn :cmovies="movies"></cpn>
  </div>

通过v-bind动态绑定子组件的cmovies，将父组件的movies传入到子组件的cmovies中
子组件中的cmovies在props中

    const cpn = {
      template: '#p1',
      props: {
        cmovies: {
          type: Array
        }
      },
      data() {
        return {}
      }
    }

父组件中的movies

    const app = new Vue({
      el: '#app',
      data: {
        movies: ['海王','钢铁侠']
      },
      components: {
        cpn: cpn
      }
    })

在这里插入图片描述
子组件成功接收到父组件传来的movies

子组件向父组件通信

子组件想要传递东西给父组件，则需通过自定义事件来传递信息

vm.$emit( eventName, […args] )

参数：

{string} eventName
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调

  <div id="app">
    <cpn @itemclick='cpnclick'></cpn>
  </div>

子组件

  <template id="p1">
    <div>
      <button v-for="item in categories" @click="btn(item.name)">
        {{item.name}}
      </button>
    </div>
  </template>

    const cpn = {
      template: '#p1',
      data() {
        return {
          categories: [
            {id: 'aaa',name: '热门推荐'},
            {id: 'bbb',name: '手机数码'},
            {id: 'ccc',name: '家用家电'},
            {id: 'ddd',name: '电脑办公'}
          ]
        }
      },
      methods: {
        btn(item) {
          //发射事件
          this.$emit('itemclick',item)
        }
      }
    }

子组件中的btn方法实现将数据发送给父组件
每点击这个按钮就将按钮的名字传给父组件

父组件

    const app = new Vue({
      el: '#app',
      data: {
        message: '父组件',
      },
      components: {
        cpn: cpn
      },
      methods: {
        cpnclick(item) {
          console.log('我接收到了',item)
        }
      }
    })

父组件中定义了一个接收的方法cpnclick(item)，item就是接收到的值
在这里插入图片描述

父子组件双向绑定

如何实现父组件的值改了，子组件也该，子组件的值改了，父组件的值也跟着该。
先看实现效果：
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>父组件data:{{num1}}</h1>
    <cpn :cnum1="num1" @smnumber1="number1"></cpn>
  </div>
  <template id="cpn">
    <div>
      <h1>子组件props:{{cnum1}}</h1>
      <h1>子组件smnumber1: {{smnumber1}}</h1>
      <input type="text" :value="cnum1" @input="inputnumber1">
    </div>
  </template>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num1: 10
      },
      methods: {
        number1(value) {
          this.num1 = Number(value)
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              smnumber1: this.cnum1
            }
          },
          props: {
            cnum1: Number
          },
          methods: {
            inputnumber1(event) {
              this.smnumber1 = event.target.value
              this.$emit('smnumber1',this.smnumber1)
            }
          }
        }
      }
    })
  </script>
</body>
</html>