[JavaScript知识库]vue组件以及组件通信

组件-简介

组件：组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护，一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)
什么时候封装组件? 遇到重复标签, 可复用的时候
组件好处? 各自独立, 互不影响

组件使用

每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件
创建和使用组件步骤

1. 创建.vue文件–标签–样式–JS进去
2. 导入组件(import xxx from ‘path/to/components/xxx.vue’)
3. 注册组件(全局/ 局部)
   全局 语法: Vue.component("组件名", 组件对象)
   局部 语法：export default { components: { "组件名": 组件对象 } }
4. 使用组件(组件名用作标签),写在template中

组件通信

因为每个组件的变量和值都是独立的

组件通信先介绍父传子, 子传父

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

父向子

1. 什么时候需要父传子技术?
   从一个vue组件里把值传给另一个vue组件(父->子)
2. 父传子口诀(步骤)是什么?
   子组件内, props定义变量, 在子组件使用变量
   父组件内, 使用子组件, 属性方式给props变量传值
3. 例
   子组件代码

<template> 
 <div class="my-product">    
 <h3>标题: {{ title }}</h3>    
 <p>价格: {{ price }}元</p>    
 <p>{{ intro }}</p>  
 </div></template>
 ?<script>
 export default {  
 props: ['title', 'price', 'intro']}
 </script>
 ?<style>
 .my-product {  width: 400px; 
  padding: 20px;  
  border: 2px solid #000;  
  border-radius: 5px;  
  margin: 10px;}
  </style>

App.vue中使用并传入数据

<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

子向父

从子组件把值传出来给外面使用
语法:

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