*组件样式冲突问题

如何解决组件样式冲突问题

:为每个组件分配唯一的自定义属性

<template>
    <div class="container" data-v-001>
        <h3 data-v-001>任意组件</h3>
    </div>
</template>

<style>
    .container[data-v-001] {
        border:1px solid red;
    }
</style>

:style节点的scoped属性

<template>
    <div class="container">
        <h3>任意组件</h3>
    </div>
</template>

<style scoped>
    //style节点的scoped属性用来自动为每个组件分配唯一的“自定义属性”
    //并自动为当前组件的DOM标签和style标签应用这个自定义属性，防止组件的样式冲突问题
    .container {
        border: 1px solid red;
    }
</style>

/deep/样式穿透

如果给当前组件的style节点添加了scoped属性，则当前组件的样式对其子组件是不生效的，如果想让某些样式对子组件生效，可以使用/deep/深度选择器

<style lang="less" scoped>
    .title {
        color:blue;/*不加/deep/时，生成的选择器格式为 .title[data-v-052242de] */
    }
    
    /deep/ .title {
        color:blue; /*加上/deep/时，生成的选择器格式为[data-v-052242de] .title */
    }
</style>

*组件生命周期的简单介绍（有必要看一眼）

组件的生命周期

1.组件运行过程

开始→import导入组件→componts注册组件→以标签的形式使用组件→

在内存中创建组件的实例对象→把创建的组件实例渲染到页面上→

组件切换销毁需要被隐藏的组件→结束

总结：组件的生命周期指的是：组件从创建->运行（渲染）->销毁的整个过程，强调的是一个时间段

2.如何监听组件的不同时刻

vue框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用：

①当组件在内存中被创建完毕后，会自动调用created函数

②当组件被成功的渲染到页面上之后，会自动调用mounted函数

③当组件被销毁完毕之后，会自动调用unmounted函数

重点：在created中发ajax请求初始数据

​ 在mounted中操纵DOM元素

*这里介绍的是父组件和子组件之间的数据共享

组件的props

props是组件的自定义属性，组件的使用者可以通过props把数据传递到子组件内部，供子组件进行使用

<!-- 通过自定义props，把文章的标题和作者，传递到my-article组件中-->
<my-article title="白日依山尽" author="ccd"></my-article>

props的作用：父组件通过props向子组件传递要展示的数据

props的好处：提高了组件的复用性

在组件中声明props

在封装vue组件时，可以把动态的数据项声明为props自定义属性。自定义属性可以在当前组件的模板结构中被直接使用

<template>
    <h3>标题：{{title}}</h3>
    <h5>作者：{{author}}</h5>
</template>

<script>
  export default {
      props:['title','author'],  //父组件传递给my-article组件的数据必须在,props节点中声明
  }
</script>

动态绑定props的值

：可以使用v-bind属性绑定的形式，为组件动态绑定props的值

<!-- 通过 v-bind 属性的绑定，为title动态赋予一个变量的值-->
<!-- 通过 v-bind 属性的绑定，为author动态赋予一个表达式的值-->
<my-article :title="info.title" :author="'post by ' + info.author"></my-article>

组件之间的数据共享

父组件通过v-bind属性绑定向子组件共享数据。同时，子组件需要使用props接收数据。

//父组件
<my-test-1 :msg="message" :user="userinfo"></my-test-1>

data(){
    return {
        message:'hello vue',
        userinfo:{name:'zs',age:20},
    }
}

//子组件
<template>
<p>{{msg}}</p>    
<p>{{user}}</p>  
</template>

<script>
export default {
  props:['msg','user']
}    
</script>

组件之间的数据共享

兄弟组件之间实现数据共享的方案时EventBus，可以借助于第三方的包mitt来创建eventBus对象，从而实现兄弟组件之间的数据共享

组件之间数据共享方案。

父节点通过provide共享数据

export default {
    data () {
        return {
            color:'red'
        }
    },
    provide(){
        return{
            color:this.color,
        }
    }
}

子孙节点可以使用inject数组，接受父级节点向下共享的数据：

<template>  <h5>子孙组件 --- {{color}}</h5></template><script>   //子孙组件，使用inject接收父节点向下共享的color数据，并在页面上使用      inject：['color'],</script>

父节点对外共享响应式的数据

import {computed} from 'vue'export default {    data(){        return {color:'red'}    },    provide(){        return {            //使用computed函数，可以把要共享的数据"包装为"响应式数据            color：computed(() => this.color),s        }    }}

如果父级节点使用响应式数据，则子孙节点必须以.value的形式进行使用

<template>    <h5>子孙组件 --- {{color.value}}</h5></template><script>export default {    inject:['color'],}</script>

*这里介绍ref属性，在table数据表格那里可能会看到这个属性

使用ref引用DOM元素

<h3 ref="myh3">ref组件</h3><button @click="getRef">获取$ref</button>methods:{    getRef(){        //通过this.$ref.引用的名称，可以获取到DOM元素的引用        console.log(this.$ref.myh3)        //操作DOM元素，把文本颜色改为红色        this.$refs.myh3.style.color = 'red'    }}

使用ref引用组件实例

<my-counter ref="counterRef">myref组件</h3><button @click="getRef">获取$ref引用</button>methods:{    getRef(){        //通过this.$refs.引用的名称，可以引用组件的实例        console.log(this.$refs.counterRef)        //引用到组件的实例之后，就可以调用组件上的methods方法        this.$refs.counterRef.add()    }}

this.$nextTick(cb)方法

组件的$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新周期之后执行。通俗的理解是：等组件的DOM异步地重新渲染完成后，再执行cb回调函数。从而保证cb回调函数可以操作到最新的DOM元素

<input type="text" v-if="inputVisibe" ref="ipt" /><button v-else @click="showInput">展示input输入框</button>methods：{    showInput(){        this.inputVisible = true         this.$nextTick(() => {            this.$refs.ipt.focus()        })    }}

*简单路由

vue-router的部分高级用法

$route.params参数对象

通过动态路由匹配的方式渲染出来的组件！可以使用$route.params对象访问到动态匹配的参数值(此处解释了为什么我们用不了这种方式传参)

<template>    <h3>----{{$route.params.id}} </h3> </template><script>export default {    name:'MyMovie',}</script>

使用props接受路由参数

为了简化路由参数的获取形式，vue-router允许在路由规则中开启props传参。

//1.在定义路由规则时，声明props：true选项，// 即可在Movie组件中，以props的形式接收到路由规则匹配的参数项{path:'/movie/id',component:Movie,props:true}<template>    <!-- 直接使用props接收路由参数-->    <h3>--- {{id}}</h3></template><script>export default {    props:['id'] //使用props接收路由规则中匹配到的参数项}</script>

vue-router常用的编程式导航API

this.$router.push('hash地址')跳转到指定的Hash地址，从而展示对应组件this.$router.go(数值n)实现导航历史的前进、后退

$router.go示例

<template>    <h3> ----{{id}} </h3>    <button @click="goBack">后退</button></template><script>export default {    props:['id'],    methods:{        goBack(){this.$router.go(-1)}    },}</script>

*补充axios请求

首先，axios本质是拦截器。

看这个文章就行。。。

(3条消息) 在Vue.js中使用 axios 访问 API，与后台进行交互_kqZhu的博客-CSDN博客