vue_组件通讯

cv工程师_
228 阅读4分钟

vue组件化开发

什么是组件化开发？

组件是可复用的Vue实例，封装标签，样式和js代码

vue组件分类：

  1. 页面组件
  2. 页面下的功能组件

组件化开发，一个页面（.vue）可能有多个组件（.vue）组成完整的页面功能

封装的思想，把页面上 可重用的部分 封装为组件，从而方便项目的开发和维护

一个页面，可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的解构（template）样式（style） 和行为（script） （html，css和js）

image (1).png

vue组件-封装使用

  1. 复用，一次封装多次使用
  2. 代码整洁，方便维护

步骤

  1. 定义组件
  2. 注册组件
  3. 使用组件

yuque_diagram.jpg

定义一个名为MyCom的组件，并在App.vue中使用它

目录
├── App.vue  # 在App.vue内部，导入并使用组件
└── MyCom.vue
  1. 创建组件： MyCom.vue
  2. 引入并注册组件
// 局部注册组件

// 进入到当前组件内部
// 1. 导入组件
import 组件名 from './组件文件.vue'

// 2. 局部注册
export default {
   components: {
     组件名: 组件名
   }
}
  1. 使用组件。在当前页面中，当做标签来使用。

注意：

  • 组件名不能与现有的html标签名一致。
  • 每一个组件都是封闭的。它有自己的template, script，style
  • 组件之间可以相互引用使用。

vue组件-用scoped实现组件的私有样式

解决多个组件样式名冲突问题

问题：默认组件style中定义的样式是全局=>存在相同名字覆盖的情况

yuque_diagram (1).jpg

解决方案 局部样式：在style标签上加上scoped属性

<stype scoped>
  h2 {} // 样式只会在当前组件内生效
</style>

原理：

  • 在style上加入scoped属性，就会在此组件的标签加上一个随机生成data-v开头的属性

  • 而且必须是当前组件的元素或者子组件的根元素，才会有这个自定义属性

image (2).png

总结： style 上加scoped，组件内的样式只在当前vue组件生效，相反，样式就是全局的

vue组件-/deep/深度作用选择符

当父子组件都使用了scoped的情况下，如果想在父组件设置子组件里面的样式，可以使用deep深度作用符

父组件：

<template>
  <div class="box">
    <h1 class="red">父组件</h1>
    <hr />
+    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  components: {
    Child,
  },
}
</script>

<style scoped>
.red {
  color: blue;
}
+ .box /deep/ h2 {
+  color: lawngreen;
+ }
</style>

子组件：

<template>
  <div>
     <h2>子组件</h2>
     <p class="red">
      <span>123</span>
    </p>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.red {
  color: red;
}
</style>

总结： 父组件中控制子组件元素或类名，覆盖样式=》需要在前边加上 /deep/

注意⚠️：默认子组件的根元素，会带上父组件的data-v-hash属性，所以可以直接控制

vue封装组件-实际操作

<template>
  <div>
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <div class="container" v-show="isShow">
      <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pannel",
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}
h4 {
  line-height: 2;
  margin: 0;
}
.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}
.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}
</style>

总结: 封装标签+样式+js - 组件都是独立的, 为了复用

注册使用：

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
+    <Pannel></Pannel>
  </div>
</template>

<script>
+ import Pannel from './components/Pannel.vue'
export default {
  components: {
+    Pannel: Pannel // key随便定义的组件名(也是一会使用的自定义标签名, 不能与已知的 标签重名)
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
  }
}
</style>

vue组件通信

一个页面由多个组件构成，每个组件之间的数据是相互独立的

如何这做到组件之间做通信呢？ 因为每个组件的变量和值都是独立的=> 如果想要获取对方页面的变量应该怎么做？

yuque_diagram (2).jpg

组件通信__父传子

如果一个组件A在组件B中被导入使用，称组件B是父组件，组件A是子组件

yuque_diagram (3).jpg

示例代码： 父组件

<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
  <h1>父组件</h1>
  <!-- 1. 父传。自定义属性 -->
  <MyCom :abc="userName" :list="hobby"/>
  </div>
</template>

<script>
  // 导入->注册->使用
  import MyCom from './MyCom.vue'
  export default {
    data(){
      return {
        userName: '小花',
        hobby: ['vue','react']
      }
    },
    components: { MyCom }
  }
</script>

<style>
  
</style>

子组件：

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <!-- 使用 -->
    {{abc}}
    <p>
      {{list[0]}}
    </p>
    <button @click="fn">打印</button>
  </div>
</template>

<script>
export default {
  // 2.子接
  props: ['abc', 'list'],
  methods: {
    fn(){
      console.log(this, this.abc)
      
    }
  }
}
</script>

<style>

</style>

vue单向数据流-不要修改props

在vue中需要遵循单向数据流原则

  1. 在父传子的前提下，父组件的数据发生变化会通知子组件自动更新
  2. 子组件内部，不能直接修改父组件传递过的props=>props是只读的

Snipaste_2022-05-06_14-59-29.png

特殊说明 父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型，相互更新，但是不能改变引用地址

props的值不能重新赋值，但是引用类型可以子改父

vue组件通信_子传父

子传父是指：从子组件内部把数据传出来给父组件使用或者修改父组件数据

image (3).png

语法

  • 父组件中：< 子组件 @自定义事件名1="父methods函数1" @自定义事件名2="父methods函数2" />

  • 子: this.$emit("自定义事件名1", 传值1) ---> 执行父methods里函数代码

yuque_diagram (4).jpg

示例代码：

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>32-子传父</h1>

    <!-- 1. 添加事件监听 -->
    <!-- 当子组件发生了abc事件要执行fn函数 -->
    <MyCom @abc="fn"/>
  </div>
</template>

<script>
// 导入
import MyCom from './MyCom.vue'
export default {
  components: { MyCom },
  methods: {
    fn(obj){
      console.log('fn-子组件发生了abc事件',obj)
    }
  }
}
</script>

<style>

</style>

子组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <button @click="fn">触发abc事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn(){
      console.log('子组件click')
      // 2. 触发abc事件
      this.$emit('abc',{name:'小明'})
    }
  }
}
</script>

image (4).png

父自定义事件和方法, 等待子组件触发事件给方法传值

avatar
文章
阅读
粉丝