【Vue2】Component 组件

Main.JS入口函数，Vue的用法

//导入vue模块，得到Vue构造函数
import Vue from 'vue'

// 导入根组件App.vue
import App from './App.vue'

// 产品配置提示关闭
Vue.config.productionTip = false

// 创建一个Vue实例
new Vue({
  // el: '#app' 等同于 .$mount('#app') 
  // Vue实例的$mount() 方法，作用和el属性完全一-样!
  // 把render函数指定的组件，替换 HTML页面的id="app"元素
  render: h => h(App),
}).$mount('#app')

@符号根路径的配置位置：

配置项的所载文件

jsconfig.json

配置项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

组件的定义：

<template>
    <!-- 组件模板中，只能存在一个根节点元素 -->
    <div class="text-box">
        <h3>测试组件 {{username}}</h3>
        <button @click="changeName">修改名称</button>
    </div>
</template>    

<script>
// 将组件导出
export default {
    // 组件中的data不能是对象，而是一个方法
    // [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
    // data: {
    //     username: 'sadasd'
    // }
    data() {
        return {
            username: 'Cloud9'
        }
    },
    // 定义方法
    methods: {
        changeName(event) {
            this.username = 'Cloud1'
        }
    },

    filters: {}, // 过滤器
    computed: {}, // 计算属性
    watch: {}, // 监听器
}
</script>
<style lang="less" scoped>
// 开启CSS样式预处理工具LESS
    /deep/ h5 {
        background-color: pink;
        color: red !important;
    }
</style>

组件的使用：

3. vue组件的三个组成部分

每个.vue组件都由3部分构成，分别是:
template ->组件的模板结构
script ->组件的JavaScript行为
style 组件的样式

步骤1 : 使用import语法导入需要的组件

import Left from '@/components/Left.vue'

步骤2:使用components节点注册组件

export default {
  name: 'App',
  components: {
    Left,
  },
}

步骤3 : 以标签形式使用刚才注册的组件

<template>
  <div id="app">
    <Left ref="left"/><Right/>
  </div>
</template>

使用全局注册的方式注册组件

在Main.JS中做如下配置：

//导入vue模块，得到Vue构造函数
import Vue from 'vue'

// 导入根组件App.vue
import App from './App.vue'

// 产品配置提示关闭？
Vue.config.productionTip = false


// 全局组件注册, 需要反复使用的组件，可以注册到这里面来
// 1、先导入必要的内容
import Counts from '@/components/Counts.vue'
// 2、Vue.Component注册组件, 组件名称和组件资源
Vue.component('Counts', Counts) 


// 创建一个Vue实例
new Vue({
  // el: '#app' 等同于 .$mount('#app') 
  // Vue实例的$mount() 方法，作用和el属性完全一-样!
  // 把render函数指定的组件，替换 HTML页面的id="app"元素
  render: h => h(App),
}).$mount('#app')

使用时直接写组件标签即可使用：

<template>
    <!-- 组件模板中，只能存在一个根节点元素 -->
    <div class="text-box">
        <h3>测试组件 {{username}}</h3>
        <button @click="changeName">修改名称</button>

        <!-- 全局注册的组件不需要在子组件引入，可以直接获取 -->
        <Counts/>
    </div>
</template>    

组件的Props属性

通过Props属性来实现父组件给子组件进行传递

每个正在使用的组件需要区别控制不同的数据，提高组件的复用性

Counts组件的Props属性定义：

<template>
    <div>
        <h3>这是Count组件</h3>
        <h5>h5asdasd</h5>
        <p>默认值 {{counter2}}</p>
        <button @click="increase">点击加一</button>
    </div>
</template>

<script>
export default {
    /**
     * 声明一个自定义属性
     * 这个属性可以让调用组件的组件，通过声明的属性传递不同数据到组件中
     * 
     * props是组件的自定义属性，在封装通用组件的时候，
     * 合理地使用props可以极大的提高组件的复用性!
     * 
     * //自定义属性的名字，是封装者自定义的(只要名称合法即可)
     * // props中的数据，可以直接在模板结构中被使用
     * props属性是只读的
     */

    // 简单语法
    // props: [
    //     // 'counter'
    // ],
    props: {
        /**
         * 更改属性配置，让其具有默认属性
         */
        counter: {
            required: true, // 是否强制要求 （组件属性必填项校验）
            type: Number, // 定义属性数据类型
            default: 0 // 定义属性默认值
        }
    },
    data() {
        return {
            /**
             * Vue不推荐直接操作props属性，可以将其值赋值给组件进行修改
             * data属性允许读写
             */
            // counter: 0
            counter2: this.counter
        }
    },
    methods: {
        increase() {
            this.counter2 += 1
        }
    },
}
</script>

因为上面已经把Counts组件放到全局里注册了，

下面使用Counts组件直接写标签即可

App.vue，使用Counts组件：

<template>
  <div id="app">
    <div >
      <h3>组件Props属性, 传递不同的值</h3>
      <!-- 
        props属性的值在这里传递进入 
        通过v-bind指令传递具体值类型，不使用v-bind默认字符串属性
        可以设置default属性，让组件可以不设置属性，组件将默认赋值默认参数
      -->
      <Counts style="float: left;" :counter="50" class="aaa"/>
      <Counts style="float: right;" :counter="100"/>
      <div style="clear:both;"></div>
    </div>
  </div>
</template>

组件样式冲突的问题：

Counts.vue的样式标签：

<style scoped>
/* 
6.组件之间的样式冲突问题
默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是:
①单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
②每个组件中的样式，都会影响整个index.html页面中的DOM元素

scoped表示只对当前组件样式有效
scoped的原理，是给当前组件内的所有元素添加一个随机的属性 <element data-v-001/>
在scoped中声明的css选择器，全部附加这个data-v-001的属性，用来区别其他的组件
selector[data-v-001]

css样式DEEP穿透渲染
*/
div {
    background-color: rgb(210, 255, 192);
}
h3 {
    color: rgb(0, 255, 234);
}

</style>

　　

组件的声明周期：

    /** 第一阶段 组件创建时 */
    beforeCreate() { }, // 实例前执行
    created() { }, // 创建时
    beforeMount() { }, // 挂载之前
    mounted() { }, // 挂载时
    
    /** 第二阶段 组件运行时 */
    beforeUpdate() { }, // 更新之前
    updated() { }, // 更新后

    /** 第三阶段  组件销毁时 */
    beforeDestroy() { }, // 组件元素销毁之前
    destroyed() { }, // 组件元素已经销毁时

　　

组件之间数据共享的问题：

一、父组件给子组件传递数据：

定义Son.vue

<template>
    <div>
        <h2>这是子组件 Son.vue</h2>
        <p>
            从父组件传递过来的数据： <br>
            name: {{info.name}} <br>
            age: {{info.age}} <br>
            gender: {{info.gender}} <br>
        </p>
    </div>
</template>

<script>
export default {
    props: {
        infoObj: {
            type: Object,
            default: {
                name: '',
                age: 0,
                gender: true,
            }
        }
    }
}
</script>

定义父组件：

<template>
    <div>
        <h2>这是父组件 Father.vue</h2>
        <p>
            父组件的数据： <br>
            name: {{rowObj.name}} <br>
            age: {{rowObj.age}} <br>
            gender: {{rowObj.gender}} <br>
        </p>

        <!-- 通过v-bind指令将当前的rowObj属性，传递给子组件prop中的infoObj属性 -->
　　　　　<!-- 传递方式是引用传递，即infoObj === rowObj 为true -->
        <son :infoObj="rowObj" />
    </div>
</template>

<script>
// 引入子组件资源
import Son from './Son.vue'

export default {
　// 注册子组件
  components: { Son },
  data() {
    return {
        rowObj: {
            id: 1001,
            name: 'cloud9',
            age: 22,
            gender: false
        },
        sonData: { id: null, }
    }
  }
}
</script>

二、反过来，子组件向父组件传递数据

通过一个自定义事件来传递参数

首先是Father.vue的定义：

<template>
    <div>
        <h2>这是父组件 Father.vue</h2>
        <p>
            从子组件传递过来的数据 <br>
            {{ sonData.id }}
        </p>

        <!-- 
            子组件通过自定义事件，传递数据给父组件
            @自定义事件名=父组件方法名
         -->
        <son @test="sonDataReceive" />
    </div>
</template>

<script>
import Son from './Son.vue'

export default {
  components: { Son },
  data() {
    return {
        sonData: {
            id: null,
        }
    }
  },
  methods: {
    // 声明一个方法，且存在一个入参， 
    // 把父组件需要接收的属性用入参赋值
    sonDataReceive(val) {
        this.sonData = val
    }
  },  
}
</script>

然后在Son.vue中定义自定义的事件处理：

<template>
    <div>
        <h2>这是子组件 Son.vue</h2>
        <button @click="sendData"> 向父组件传递数据 </button>
    </div>
</template>

<script>
export default {
    data() {
        return { id: 1376 }
    },
    methods: {
        /**
         * 子组件通过事件触发方法将数据传递给父组件
         */
        sendData() {
            this.$emit('test', { id: this.id })
            this.id ++
        }
    },
}
</script>

三、兄弟组件之间的数据交互　　

在Vue2版本中，兄弟组件的数据共享办法是使用一个EventBus, 事件总线

但是实际用起来，就是两个组件或者多个组件共同控制一个JS实例

EventBus的使用步骤

①创建eventBus.js模块,并向外共享-个Vue的实例对象
②在数据发送方，调用bus. $emit('事件名称'，要发送的数据)方法触发自定义事件
③在数据接收方，调用bus.$on('事件名称'，事件处理函数)方法注册一-个自定义事件

　　

1、在utils目录下创建eventBus.js

import Vue from 'vue'

// 向外部共享一个独立的Vue实例
export default new Vue()

2、创建Left.vue 兄弟组件

<template>
    <div>
        <h3>LEFT - COMPONENT</h3>
        <button @click="send"> 向兄弟组件发送数据</button>
    </div>
</template>

<script>
import bus from '@/utils/eventBus.js'
export default {
    data() {
        return {
            message: '这是来自Left组件的数据',
        }
    },
    methods: {
        send(){
            bus.$emit('share', this.message)
        }
    }
}
</script>

3、创建Right.vue 兄弟组件

<template>
    <div>
        <h3>RIGHT - COMPONENT</h3>
        <p>接收兄弟组件的数据 {{message}}</p>
    </div>
</template>

<script>
import bus from '@/utils/eventBus.js'
export default {
    data() {
        return {
            message: null
        }
    },
    created() {
        bus.$on('share', val => {
            this.message = val
        })
    },
}
</script>

组件的Ref引用操作

一.什么是ref引用

ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。

默认情况下, 组件的$refs指向一个空对象。

二、Ref使用的简单案例：

ref类似ID属性，通过vue的$refs属性引用ref标记，可以获取这个dom对象

从而对这个元素操作

<template>
    <div>
        <h3>COMPONENT</h3>
        <button @click="changeByRef"> 操作下面这个dom元素</button>
        <div ref="myDiv"> 通过$ref改变这个元素 </div>
    </div>
</template>

<script>
export default {
    methods: {
        changeByRef() {
            // 通过 $refs操作dom元素 注意，是从本组件自身获取
            this.$refs.myDiv.style.backgroundColor = 'rgb(0,122,204)'
        }
    }
}
</script>

三、通过Ref引用组件对象：

在App中引用Left.vue组件，标记ref属性，

然后在事件方法中通过ref引用的dom对象调用组件的方法

<template>
  <div id="app">
    <button @click="actionLeft">操作Left组件</button>
    <Left ref="left"/>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'

export default {
  name: 'App',
  components: {
    Left
  },
  methods: {
    actionLeft() {
      this.$refs.left.changeByRef2()
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

Left.vue组件代码：

<template>
    <div>
        <h3>LEFT - COMPONENT</h3>
        <p> 外部组件$refs引用操作 {{ no }}</p>
    </div>
</template>

<script>
import bus from '@/utils/eventBus.js'
export default {
    data() {
        return {
            no: 100
        }
    },
    methods: {
        // 提供给外部组件操作的方法，演示$refs
        changeByRef2() {
            this.no ++
        }
    }
}
</script>

四、this.$nextTick方法

在App.vue中编写切换控制案例：

<template>
  <div id="app">
    <div>
      <!-- 切换控制案例 -->
      <input type="text" v-if="inputVisible" @blur="showButton" ref="testInput">
      <button v-else @click="showInput">切换输入框展示</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: { },
  data() {
    return {
      inputVisible: false,
    }
  },
  methods: {
    showInput() {
      /**
       * 展示输入框，关闭按钮
       * 
       */
      this.inputVisible = true

      /**
       * v-if 接收为true时并不会立即创建dom元素渲染
       * this.$refs.testInput.focus() 
       * 这样调用会出问题，因为还没创建dom元素，也就拿不到这个属性和方法
       * "TypeError: Cannot read properties of undefined (reading 'focus')"
       * 
       * 使用 this.nextTick(callBackFunction) 
       * 延迟到dom渲染完成时再执行
       * 
       * 组件的$nextTick(cb) 方法，会把cb回调推迟到下一个DOM更新周期之后执行。
       * 通俗的理解是:等组件的DOM更新完成之后，再执行cb回调函数。
       * 从而能保证cb回调函数可以操作到最新的DOM元素。
       * 
       * 所以这种方法只能适配具体的事件去操作，不能直接放在updated勾子函数中
       */
      this.$nextTick(() => {
        this.$refs.testInput.focus() 
      })
      // 但是还需要让光标聚焦到输入框中

    },
    showButton() {
      this.inputVisible = false
    }
  },
  updated() {
    /**
     * 写在updated执行时发生错误
     * 因为回显时元素已经删除了，再一次调用无法找到dom元素，导致报错
     * [Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'focus')"
     */
    // this.$nextTick(() => {
    //   this.$refs.testInput.focus() 
    // })
  },
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

　　

数组操作的简便方法：

<script>
  // 数组操作
  let arr = ['张三', '李四', '王五', '赵六', '孙七']

  // 遍历
  arr.forEach( (x, index, arr) => {
    console.log(`元素：${x}, 下标 ${index}, 数组：${arr}`)
  })

  // 查找到第一个返回true结束遍历 并且返回true
  let result = arr.some( (x, index, arr) => {
    if (x === '王五') {
      console.log(`下标位置:${index}, 数组:${arr}`)
      // 结束遍历
      return true
    }
  })

  // 判断每一个元素是否符合自定义规则，只要一个不符合就返回false
  result = arr.every( (x, index, arr) => {
    return x.length === 2
  })
  console.log(result)

  arr = [
    { id: 1001, name: '西瓜', status: true, price: 10, count: 323 },
    { id: 1002, name: '榴莲', status: true, price: 30, count: 100 },
    { id: 1003, name: '草莓', status: true, price: 440, count: 66 },
    { id: 1004, name: '车厘子', status: false, price: 20, count: 45 },
    { id: 1005, name: '蓝莓', status: false, price: 80, count: 32 },
    { id: 1006, name: '香蕉', status: true, price: 34, count: 34 },
  ]

  // 根据自定义条件 过滤元素，符合条件的元素装载到一个新的数组中
  let filteredArr = arr.filter( (x, index, arr) => {
    return x.count < 100
  })
  
  // 计数总价
  let totalPrice = 0;
  filteredArr.forEach(x => totalPrice += x.price * x.count )
  console.log(totalPrice)

  /**
   * reduce简化处理 
   * 数组.reduce( (累记变量，当前元素，当前元素下标，数组) => {}, 初始值)
   * 
   * 对上面的总价计数，可以直接写为这样
   */
  totalPrice = arr.filter( x => x.count < 100).reduce( (prev, current) => {
    // return 的结果返回给累计变量赋值，遍历完成后，将累积变量返回出去
    return prev + (current.price * current.count)
  }, 0)
  console.log(totalPrice)
</script>

动态组件

<template>
  <div id="app">
    <h3>APP根组件</h3>
    <div>
      <!-- 
        Component动态组件展示 
        默认离开时销毁组件，展示新的组件是重新创建的 
      -->
      <button @click="componentName = 'Left'" >展示左侧组件</button>
      <button @click="componentName = 'Right'" >展示右侧组件</button>
      <component keep :is="componentName"></component>
    </div>
  </div>
</template>

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  name: 'App',
  components: {
    Left,
    Right
  },
  data() {
    return {
      componentName: 'Left'
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

动态组件默认是以v-if方式展示组件，组件展示就创建，隐藏组件就销毁

如果需要保持组件不销毁，只是隐藏起来，需要使用Keep-Alive组件包裹

<keep-alive>
　　<component keep :is="componentName"></component>
</keep-alive>

如果需要保持一些组件就是需要即开即建的状态，可以使用keep-alive组件的exclude属性

也可以使用include属性，一般只使用exclude进行排除操作

      <!-- 
        Component动态组件展示 
        默认离开时销毁组件，展示新的组件是重新创建的  

        4. keep-aliv e对应的生命周期函数
        当组件被缓存时，会自动触发组件的 deactivated生命周期函数。
        当组件被激活时，会自动触发组件的 activated生命周期函数。

        如需要保持组件中数据不销毁，可以是用keep-alive标签

        指定某一个组件不需要缓存 使用exclude排除出去
        或者可以用 include指定具体需要包含的组件
         <keep-alive include="Left" exclude="Right">

        多个组件使用逗号分割
         <keep-alive include="组件1，组件2，..." exclude="组件1，组件2，...">

        注意 keep-alive 会以组件自己的name属性为准，名字不一致将导致排除不会生效
      -->
      <button @click="componentName = 'Left'" >展示左侧组件</button>
      <button @click="componentName = 'Right'" >展示右侧组件</button>

      <keep-alive exclude="MyLeft">
        <component keep :is="componentName"></component>
      </keep-alive>

插槽功能：

演示案例，SlotDemo.vue

<template>
    <div>
        <!-- 
            1.什么是插槽
            插槽(Slot) 是vue为组件的封装者提供的能力。
            允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
         -->
        <h3>插槽组件</h3>

        <!-- 
            组件调用时自定义的部分
            name属性 default默认使用 template
            abc属性是提供外部组件调用时指明的
         -->
        <div>
            <slot name="default"  msg="这是插槽的数据" :abc="info"/>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                name: 'ssssada',
                gender: true,
                age: 30
            }
        }
    }
}
</script>    

引入资源：

<template>
  <div id="app">
    <h3>APP根组件</h3>
      <slot-demo>
        <!-- 
          提供了插槽标签，可以写自定义内容
          1.如果要把内容填充到指定名称的插槽中，需要使用v-slot: 这个指令
          2. v-slot: 后面要跟上插槽的名字 
          3. v-slot: 指令不能直接用在元素身上，必须用在template 标签上一 
          4. template 这个标签，它是一 个虚拟的标签， 只起到包裹性质的作用，但是，不会被渲染为任何实质性的html元素
          <template v-slot:default>
            #default 缩写语法

          2.2后备内容
          封装组件时，可以为预留的<slot>插槽提供后备内容( 默认内容)。
            如果组件的使用者没有为插槽提供任何内容,则后备内容会生效。示例代码如下:

            可以定义多个插槽，使用 #名字 进行区分
            
            作用插槽
         -->
        <template v-slot:default="obj">
          <div>
            <p>{{obj.msg}}</p>
            <p>这是Slot标签的使用</p>
          </div>
        </template>
      </slot-demo>
    </div>
  </div>
</template>

<script>
import SlotDemo from './components/SlotDemo.vue'

export default {
  name: 'App',
  components: {
    SlotDemo
  },
  data() {
    return {
      componentName: 'Left'
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　　

对插槽的数据可以使用解构语法：

<!-- 
  对插槽可以进行结构处理
  -->
<slot-demo>
<template v-slot:default="{ msg, abc }">
  <div>
    <p>{{ msg }}</p>
    <p>这是Slot标签的使用</p>
    <p>这是info的数据 {{ abc.age }}</p>
  </div>
</template>
</slot-demo>

　　

组件支持声明多个插槽：

<template>
    <div>
        <slot name="aaa" />
         <slot name="bbb" />
    </div>
</template>

<script>
export default {
}
</script>

调用时：

<slot-demo>
    <template #aaa>content</template>
    <template #bbb>content</template>
</slot-demo>

　　

组件自定义指令：

CustomCommand.vue 组件案例

<template>
    <div>
        <!-- 自定义指令使用 -->
        <h3 v-color="color">自定义指令组件</h3>
        <h3 v-color2="color">自定义指令组件</h3>
        <button @click="color = 'green'"> 点击更换color</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            color: 'red'
        }
    },
    // 定义私有的自定义指令
    directives: {
        // 定义一个名为color的指令名称，指向了一个配置对象
        color: {

            /**
             *  在元素中标记了这个color指令，会立即触发bind钩子函数
             *  但是bind函数只会在指令第一次绑定到元素时执行
             */
            bind(el, bindObj) {
                console.log(`color指令触发 ${JSON.stringify(bindObj)}`)
                // 入参的对象就是 标记的标签元素, 可以获取入参的值
                el.style.color = bindObj.value
            },
            /**
             * update函数支持 dom更新时执行这个函数
             * 上面的切换案例
             * 
             */
            update(el, bindObj) {
                console.log(`color指令触发 ${JSON.stringify(bindObj)}`)
                // 入参的对象就是 标记的标签元素, 可以获取入参的值
                el.style.color = bindObj.value
            },
        },
        /**
         * 对上面的方法进行合并简写
         * 即初始化和dom更新都会调用执行
         */
        color2(el, bind) {
            el.style.color = bind.value
        }
    }
}
</script>

如果需要把自定义指令配置到全局中，让所有组件都可以使用

可以在Main.js中配置：

import Vue from 'vue'
import App from './App.vue'

/**
 * 配置提示信息
 */
// Vue.config.productionTip = false


// 全局指令配置 合并写法
// Vue.directive('test', (element, binding) => {
//   element.style.color = binding.value
// })

// 拆开写法
// Vue.directive('test', {
//   bind(element, binding) {
//     element.style.color = binding.value
//   },
//   update(element, binding) {
//     element.style.color = binding.value
//   }
// })


new Vue({
  render: h => h(App),
}).$mount('#app')