Vue中组件的通信

最新推荐文章于 2024-07-22 21:47:11 发布

Tochanges

最新推荐文章于 2024-07-22 21:47:11 发布

阅读量124

点赞数 1

文章标签： vue vue.js

本文链接：https://blog.csdn.net/Tochanges/article/details/104643348

版权

vue中组件的通信有三种：父子通信、子父通信和兄弟通信；

接下来就说说的是父子通信和子父通信。

父子通信就是父组件控制子组件的变化。

举一个简单的例子：2个组件是一个嵌套关系，父组件有一个按钮，子组件有一个div，父组件的按钮控制自己，子组件div的显示隐藏
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <script src='../vue.js'></script>
  <style>
    .test{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>
<body>
  <div id='app1'>
     <button @click='toggle'>显示隐藏</button> 
     {{show}}
     <!--在son组件标签上使用 hehe 自定义属性-->
     <son :hehe='show'></son>
  </div> 
  <!-- 子元素 -->
  <template id='tp1'>
    <div>
      hehe:{{hehe}}
       <div class='test' v-show ='hehe'>
       </div>
    </div>
  </template>
<script>
Vue.component('son',{
  template:'#tp1',
  props:['hehe']//接受自定义属性 props 将父组件的数据传给子组件
})
let vm1 = new Vue({
  el:'#app1',
  data:{
    show:true
  },
  methods: {
    toggle(){
      this.show=!this.show
    }
  },
})
</script>
</body>
</html>

结果为

使用父子通信基本步骤：
1.在组件标签(子组件)上使用自定属性
2.在组件内部通过props来接受自定义属性
3.接受完了，可以在组件里直接使用，但是只能用不能改，因为不管是组件还是实例，自己的数据只能自己使用

子父通信
子父通信就是子组件控制父组件的变化，其原理主要就是通过$emit 方法触发自定义事件

举一个小案例，就是通过子组件的按钮触发父组件里的方法，
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作业</title>
  <script src='../vue.js'></script>
  <style>

  </style>
</head>
<body>
  <div id='app1'>  
  这里是实例
  <hr>
  <!-- 绑定在son身上的自定义事件 事件名叫 hehe，处理函数叫add -->
  <son @hehe='change'></son>
  <!-- 绑定在button身上的内置事件 事件名叫 click 处理函数叫add -->
  <!-- <button @click='add'>添加</button> -->
  </div> 
<!-- 组件模板 -->
<template id='tp1'>
  <div>
    这里是子组件
    <button @click='sonClick'> 这里是子组件的按钮</button>
  </div>
</template>
<script>
Vue.component('son',{
  template:'#tp1',
  methods: {
    sonClick(){
      console.log('子组件的处理方法') 
      // 通过emit方法触发自定义事件 参数1 自定义事件名
      this.$emit('hehe',666)
      
    }
  },
})

let vm1 = new Vue({
  el:'#app1',
  methods: {
    change(num){
      alert('点到我了'+num)
    }
  },
})
</script>
</body>
</html>

结果：通过子组件按钮不仅触发自身方法，也触发了父组件里的方法