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

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

作者:互联网

目录

在这里插入图片描述

父组件向子组件通信

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

props

类型:Array | Object

详细

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

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

简单的事例:
基本结构

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

参数

  <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