Vue 组件通信 scoped ref属性 is动态组件插槽混入缓存组件

最新推荐文章于 2024-05-13 17:04:40 发布

ILove_bugs

最新推荐文章于 2024-05-13 17:04:40 发布

阅读量633

点赞数

分类专栏： Vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ILove_bugs/article/details/121618029

版权

本文详细探讨了Vue中的组件通信，包括父传子、子传父的数据传递，以及非父子组件间的通信策略。重点讲解了`ref`属性在操作DOM元素和子组件中的应用，介绍了动态组件`is`的使用，并深入讨论了插槽的匿名、具名和作用域插槽的概念。此外，还简要提到了混入（mixin）和缓存组件的概念。

摘要由CSDN通过智能技术生成

v-if与v-show的生命周期影响

再深刻认识 v-if和v-show以及组件的生命周期
   v-if对组件的生命周期每次都会执行一遍
   而v-show只会执行一遍。

1. scoped 样式的问题

我们需要为一个.vue中的style添加一个scoped属性，以保证样式也是局部的。

<style scoped>

</style>

app.vue中的样式是全局的

<style>


.box{
  margin:20px;
  border: 2px solid salmon;
}

</style>

2.组件通信(重点)

分两种：

1）父子如何通信

2）非父子之间如何通信

为什么要通信,因为每组件中的data只能在当前使用，所以要用一些通信手段。

2.1 父组件向子组件传递数据

2.1.1语法

<template>
  <div class="box">
      <h2>parent : 父传子语法</h2>
      username: {
 {username}}

      <!-- 1. 在使用子组件以绑定属性的方式传递数据 -->
      <v-child 
        a="my is a" 
        :b="20" 
        :c="username"
        :age="age"
      ></v-child>
  </div>
</template>

<script>

import vChild from './child.vue'

export default {
  components:{
    vChild
  },
  data(){
    return {
      username:'鲁班',
      age:30
    }
  }
}
</script>

<style>

</style>

<template>
  <div class="box">
      <h2>child</h2>
      <!-- 3. 在页面中使用父亲传递过来的数据 -->
      a: {
 { a }}
      <hr>
      b: {
 { b }}
      <hr>
      c: {
 { c }}
      <hr>
      age: {
 {age}}
  </div>
</template>

<script>
export default {
  //2. 使用props接收
    props:[ 'b','a','c','age' ],
  //4. 在js中访问传递过来的数据
  mounted(){
    console.log( this.b,'b' )
    console.log( this.age,'age' )
  }
}
</script>

<style>

</style>

2.1.2 父传子案例：教师列表

<template>
  <div class="box">
    <h2>web老师</h2>
    <v-list :teachers="teachers"></v-list>
  </div>
</template>

<script>

import vList from './vList.vue'

export default {
  data() {
    return {
      teachers:[
        {
          id: "w0001",
          username: "web-李老师",
          img: "http://www.ujiuye.com/uploadfile/2019/0109/20190109105342884.jpg",
        },
        {
          id: "w000333",
          username: "霍老师",
          img: "http://www.ujiuye.com/uploadfile/2019/0516/20190516094131820.jpg",
        },
      ]
    };
  },
  components:{
    vList
  }
};
</script>

<style scoped>

</style>

<template>
  <ul>
    <li v-for="item in teachers" :key="item.id">
      姓名：{
 { item.username }}
      <img :src="item.img" alt="" />
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["teachers"], //接收父组件传递过来的数据
};
</script>

<style scoped>
ul {
  overflow: hidden;
}
ul li {
  float: left;
  margin: 5px;
}
ul li img {
  width: 150px;
  height: 200px;
}
</style>

2.1.3props验证

props的值为{}时,可以做props验证.

type(类型) :props做校验时的常见类型:String,Number,Array,Object,Function,Boolean
required(必填项)
validator(验证器)
default(默认值)

<template>
  <div class="box">
      <h2>parent: props数据验证</h2>

    <!-- 15811112222    0371- -->
    <v-child :age="15"></v-child>
    <v-child :tel="tel" :age="110"></v-child>

    {
 {}}
  </div>
</template>

<script>

import vChild from './vChild.vue'

export default {
  components:{
    vChild
  },
  data(){
    return {
      tel:'15811112223'
    }
  }
}
</script>

<template>
  <div class="box">
      <h2>child</h2>
      {
 {tel}}
      <hr>
      {
 { tel.substring(0,3) + '****' +  tel.substring(7) }}

      <hr>
      age:{
 {age}}
  </div>
</template>

<script>
export default {

  //type,required,default
  //自定义验证规则： validator
  props:{
    tel:{
      type:String ,//验证数据类型，如果传递的数据不符合数据类型，则报错
      default(){
          return '15688883333'//如果未传则默认值生效
      }
    },
    age:{