Vue组件的使用

标签：Vue 自定义 vue 使用 组件 属性 Left

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>

对于要在UI页面中修改使用的第三方库中的样式需求，可以使用deep深层修改<style lang="less" scoped>

#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-compiler

3.创建组件实例 每一个组件本质上是一个构造函数<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结构都改变了

组件之间的数据共享 父向子：自定义属性。 子向父：自定义事件。 兄弟传值：eventBus。   父组件向子组件传值 1.子组件定义props 2.父组件使用子组件，并给自定义属性设置值 注意：如果父组件向子组件传递一个对象，其实传递的是对象的引用。验证方式是在子组件接收的对象上，使用.语法修改这个引用的属性，会发现连同外部的父组件中的信息一起改变了。   子组件向父组件传值 子组件发送自定义事件this.$emit('numchanged', this.count)

<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