首页 > 其他分享> 文章详细

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

2021-07-04 15:31:25 阅读：315 来源： 互联网

标签：vue cpn prop item 详解 props 组件 data

父组件向子组件通信

父组件想要对子组件通信，通过子组件中的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>

标签：vue,cpn,prop,item,详解,props,组件,data
来源： https://blog.csdn.net/Wind_AN/article/details/118462063

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。