[JavaScript知识库] vue父子组件之间的通信

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue父子组件之间的通信 -> 正文阅读

[JavaScript知识库]vue父子组件之间的通信

@父子组件通信
父传子：props
子传父：通过$emit发射事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子组件通信</title>
</head>
<body>
<!--第一部分：父传子-->
<div id="app1">
<!--  {{message}}-->
  <cpn1 :cmovies="movies"></cpn1>
</div>
<template id="myCpn1">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  //父组件
  const app1 = new Vue({
    el:'#app1',
    data:{
      message:'hello vue',
      movies:['速度与激情','海王','疯狂动物城']
    },
    components:{
      //子组件
      cpn1:{
        template:'#myCpn1',
        //父传子：props
        props:{
          cmovies:{
            type:Array,
            default(){  //vue2.5x以上必须是函数
              return[]
            }
          }
        }
      }
    },
  })
</script>

<!--第二部分：子传父-->
<div id="app2">
  <!--  {{message}}-->
  <cpn2 @item-click="cpnClick"></cpn2>
</div>
<template id="myCpn2">
  <div>
    <button v-for="item in newtempdata"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  //父组件
  const app2 = new Vue({
    el:'#app2',
    data:{
      message:'hello vue',
    },
    components:{
      //子组件
      cpn2:{
        template:'#myCpn2',
        data(){  //必须是函数
          return{
            newtempdata:[
              {id:'aa',name:'鸿星尔克'},
              {id:'bb',name:'安踏'},
              {id:'cc',name:'361'},
              {id:'dd',name:'李宁'},
            ]
          }
        },
        methods:{
          //发射事件
          btnClick(item){
            this.$emit('item-click',item)
          }
        },
      },
    },
    //父组件接收事件
    methods:{
      cpnClick(item){
        console.log('cpnClick')
      }
    }
  })
</script>
</body>
</html>