正传

最新推荐文章于 2024-06-09 08:24:38 发布

乐意-李

最新推荐文章于 2024-06-09 08:24:38 发布

阅读量89

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_45903009/article/details/115561829

版权

文章目录

一：组件

1·1：什么是组件：

组件用于的封装可重复使用的ui代码块，扩展HTML标签的功能

组件的本质：自定义标签

1·2：组件的多行标签只能有一个根节点

（vue只允许模板里存在一个根节点）

<template>
  <div>
      <!-- Vue只允许模板里存在一个根节点。 -->
      <h1>我是一个组件</h1>
      <h1>我是一个组件</h1>
      <h1>我是一个组件</h1>
  </div>
</template>

1·3：vue组件的data为什么是一个函数

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，

而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的

基于这一理念，组件每复用一次，data数据就应该被复制一次，

之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响

语法：

data（）{
  return {
  		key:val
  }
}

1.4:组件中关于v-for指令的问题

在组件中使用v-for，必须给后面添加一个key

所谓的key值是我们新遍历出来的内容的唯一标识

让当前的这个元素在进行dom操作的时候通过这个唯一的标识提供更快的速度

<template>
<div>
  <h1 v-for="(v,i) in arr" v-bind:key="i">{{v}}</h1>
</div>

</template>

1.5:组件中样式设置

全局样式设置： app.vue 的style中注意不加scoped

局部样式设置：在组件自身的style中设置样式但是要加scoped 表示当前样式仅对当前组件生效

二：父子组件的作用域

组件相当于完整的vue实例

组件与vue实例间作用域独立（组件与vue实例中data数据不互通）

即就是父子组件间作用域相互独立

三：父子组件

3·1：父子组件的概念

父子组件就是包含嵌套组件关系

组件之间建立的关系叫做组件的引用

3·2：组件的引用流程

引用
调用
使用

<template>
  <div>
      我是父
      <!-- 3.使用 -->
      <Zi/>
  </div>
</template>

<script>
// 1.引用
import Zi from "./zi.vue"
export default {
// 2.调用
    components:{
        Zi
    }
}
</script>

<style scoped></style>

四：props：正向传值

概念：prop选项用来声明期待获得的数据的

props的本质是一个元素属性

作用：在组件创建的时候无值在调用的时候向内部传入数据进行展示

4·1：基本使用

书写位置：和data，methods，watch同级的位置上

用来定义接受父组件传递过来的参数

4·2：语法

props:[“接受变量1”,“接受变量2”,“接受变量3”,......n]

子组件

<template>
  <div class="item">
    <img :src="imgurl"/>
    <p>{{text}}</p>
  </div>
</template>

<script>
export default {
    props:["imgurl","text"]
};
</script>
<style>
img{
    width: 60px;
    height: 40px;
}
</style>

父组件

<template>
  <div class="content">
    <Son v-for="(v,i) in arr" :key="i" :imgurl="v.imgurl" :text="v.text"></Son>
  </div>
</template>

<script>
import Son from "./3zitabbar"
export default {
    components:{
        Son
    },
    data(){
        return{
            arr:[
                {imgurl:"./img1.jpg",text:"你的"},
                {imgurl:"./img2.jpg",text:"商城"},
                {imgurl:"./img3.jpg",text:"订单"},
                {imgurl:"./img4.jpg",text:"关于"}
            ]
        }
    }
}
</script>

<style scoped>
.content{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
}
</style>

4·4：props的进阶使用

【props的验证】：对props传递过来的参数进行验证验证是否是我们需要的数据

props:{
//验证数据类型
props变量:Number,

//验证多个数据类型
props变量:[Number,String],

//不能为空
props变量:{
type:数据类型,
required:true
}

//默认值
props变量:{
type:数据类型,
default:默认值
}
}