Vue组件简述 组件化开发是Vue的开发模式,组件是Vue的重要组成部分。 vue私有组件的使用分三步 1.导入:import Left from '@/components/Left.vue' 2.注册:components: { Left } 3.使用:<Left/>
<template> <div id="app"> <h1>Hello Vue Component</h1> <Left/> </div> </template> <script> import Left from '@/components/Left.vue' export default { components: { Left } }; </script>Vue全局组件的使用 在main.js文件中 1.导入import Left from '@/components/Left.vue' 2.注册Vue.component('MyLeft', Left)
import Left from '@/components/Left.vue' import Right from '@/components/Right.vue' Vue.config.productionTip = false Vue.component('MyLeft', Left) Vue.component('MyRight',Right)Props自定义属性 使用props的优势:提高组件的复用性。 在自定义组件中,使用props给自定义组件定义自定义属性。 另外、如果对传入的属性有格外要求,则需要使用props对象定义,如果没有要求,则使用props数组定义。
<script> export default { // 组件的自定义属性,简单的方式 // 可以在外面使用时,可以自定义设置,传输 // props是一个数组 // props: ['customInitValue'], // 如果要对自定义属性设置默认值,那么就需要用下面这种对象的方式进行定义 props: { customInitValue: { // 设置自定义属性的默认值 default: 0, // 设置自定义属性的类型 type: Number, // 这个属性是必填项,自定义组件要传这个值 required: true } }, data() { return { count: 0, // 自定义属性是只读的,如果需要对自定义属性的值做修改,可以把它设置到data属性中 customInitCount: this.customInitValue }; }, }; </script>自定义属性的使用
//传递的是字符串属性 <Counter customInitValue="3"></Counter> //使用v-bind:传递的是数字 <Counter :customInitValue="12"></Counter>Vue组件的style样式冲突 因为Vue项目是单页面应用,所有项目里定义的所有组件最终都是放在一个index.html下,如果在组件内对h2标签添加css样式,等编译到项目后会对整个index.html页面整个范围内进行修饰。 解决方法: 通过给style标签添加scoped修饰,Vue会在编译完成的标签中自动给当前组件下的所有标签添加 data-v-001这样的属性,然后在添加样式时是自动改成标签+属性选择器的形式设置。这样可以保证组件内的style修饰只作用到当前的组件内。
<style lang="less" scoped> #counter { background-color: beige; } </style>
#right { background-color: brown; // 使用场景:项目UI中使用了第三方库的UI组件,开发中要自定义修改第三方库组件的样式,又不能直接拿第三库的源码修改,可以通过/deep/深层修改 // 使用/deep/ p修饰的样式 编译器最终会转成[data-v-001] p{}父子选择器的形式 /deep/ p { background-color: pink; } } </style>
Vue项目运行流程 1.在main.js项目入口,通过Vue实例将根组件实例替换到index.html的占位标签上 2.因为浏览器是无法解析vue文件的,所以在运行Vue项目之前,会先通过webpack进行编译,将vue文件编译成普通的js文件,添加到index.html中,浏览器就可以去解析了。编译工具为:
vue-template-compiler3.创建组件实例 每一个组件本质上是一个构造函数<template>
<div id="left"> Left - 组件 <Counter v-bind:customInitValue="3"></Counter> </div> </template>当使用这个组件标签时,本质上是通过构造函数创建一个组件实例对象。
<MyLeft></MyLeft>
组件的生命周期
重要的生命周期函数 组件创建阶段 created: props, data, methods初始化完成 mounted: 内存中的html结构已经渲染到了Dom中。 组件运行阶段 当数据发送变化时,就会触发更新周期函数 beforeUpdata: 数据改变,DOM结构没变 updated: 数据和DOM结构都改变了![](/i/l/?n=23&i=blog/826860/202212/826860-20221214234650324-88726113.png)
<template> <div> 当前计数:{{count}} <button @click="increat">+1</button> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { increat() { this.count += 1 this.$emit('numchanged', this.count) } }, }; </script>
父组件处理自定义事件
<Child @numchanged="handleChildChange"></Child>
兄弟组件EventBus通信
1.创建EventBus模块,使用一个空vue实例用来作为发送消息,接收消息的通道import Vue from 'vue' export default new Vue()2.Left组件通过EventBus通道,发送消息bus.$emit('sendMsg', this.message)<template>
<div id="left"> <button @click="sendMsg">发送好诗给Right组件</button> </div> </template> <script> import bus from '../event/EventBus' export default { components: { Counter }, data() { return { message: '黑云压城城欲摧, 甲光向日金鳞开' }; }, methods: { sendMsg() { bus.$emit('sendMsg', this.message) } }, }; </script>3.Right在组件挂载时监听bus事件bus.$on('sendMsg', (val) => {})
<template> <div id="right"> Right 子组件 {{reciveMsg}} </div> </template> <script> import bus from '../event/EventBus' export default { data() { return { reciveMsg: '' }; }, created() { bus.$on('sendMsg', (val) => { this.reciveMsg = val }) } }; </script>Ref引用 在html开发中,经常会通过浏览器提供的API操作DOM,在Vue中也提供了一种途径用来操作DOM 这种不是调用document.getElementById()这样,而是通过设置ref引用属性来设置的。 在Vue实例中,有一个内置的属性$refs, 里面保存了当前组件实例中所有的refs, 组件中的标签定义的ref都被收集在了这里。 组件内部标签的refs
<template> <div> <h2>引用组件</h2> <hr> <p ref="pRef">鹅鹅鹅,曲项向天歌</p> <button @click="changeColor">点击变色</button> </div> </template> <script> export default { methods: { changeColor() { console.log(this); this.$refs.pRef.style.color = 'red' } }, }; </script>
组件内部的子组件
<template> <div id="app"> <h1>Hello Vue Component</h1> <h2>Child组件的计数为:{{supCount}}</h2> <button @click="resetZero">将计数重置为0</button> <hr> <input v-if="visibelInput" @blur="hideInput" ref="iptRef" type="text"> <button v-else @click="showInput" >请输入文字</button> <hr> <!-- 3.使用组件 --> <Child ref="child" @numchanged="handleChildChange"></Child> </div> </template>
this.$nextTick是实例对象中内置的方法,它的回调方法是在下一个回调周期开始时调用
methods: { handleChildChange(val) { console.log(val); this.supCount = val }, resetZero() { console.log(this); this.$refs.child.count = 0 }, showInput() { this.visibelInput = true this.$nextTick(()=>{ this.$refs.iptRef.focus() }) }, hideInput() { this.visibelInput = false } }
标签:Vue,自定义,vue,使用,组件,属性,Left From: https://www.cnblogs.com/zhou--fei/p/16984010.html