Vue3知识总结-3

标题# Vue3知识总结-3

模版引用

需要直接访问底层的dom元素，要使用ref这个attribute,挂载结束后引用都会暴露在this.$refs上面

<template>
<div ref="container" class="container">{{content}}</div>
  <input type="text" ref="username">
  <button @click="getElementHandle">获取元素</button>
</template>
<script>
//内容改变：{{}}
//属性改变：v-bind:指令
//事件：v-on:click
export default {
  data(){
    return{
      content:"内容"
    }
  },
  methods:{
    getElementHandle(){
      //原生js的属性
      console.log(this.$refs.container.innerHTML = "123")
      console.log(this.$refs.username.value)
    }
  }
}

</script>


<style scoped>

</style>

组件组成

组件最大的优势就是可复用性

当构件的时候，放在一个单独的.vue文件中，被叫做单文件组件

组件构成结构

<template>
<!-- 3,显示组件-->
  <MyComponent />
  <my-component />
</template>
<script>
//1.引入组件
  import MyComponent from "@/components/MyComponent.vue";
  export default {
    //2.注入组件
    components:{
      MyComponent

    }
  }
</script>
<style>

</style>

# 组件传递数据——props

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的，使用的是prop

下面会分享一下动态和静态的两种方法，都是挺不错的。

props数据传递，只能从父->子

父亲的代码

```JavaScript
<template>
 <h3>Parent</h3>
  <Child :title="message"/>
</template>
<script>
  import Child from "@/components/Child.vue";
  export default {
    data(){
      return{
        message:"!",
      }
    },
    components:{
      Child
    }

  }
</script>
<style scoped>

</style>

孩子的代码

<template>
  <h3>Child</h3>
  <p>{{title}}</p>
  <p>{{demo}}</p>
</template>
<script>
export default {
  data(){
    return{

    }
  },
  props:["title", "demo"]
}
</script>



<style scoped>

</style>

组件传递多种数据类型

通过props传递数据，可以传递所有类型的值

下面是所有的展示：

<template>
  <h3>Child</h3>
  <p>{{title}}</p>
  <p>{{demo}}</p>
  <p>{{age}}</p>
  <ul>
    <li v-for="(item, index) of names" :key="index">{{ item}}</li>
  </ul>
  <p>{{ userInfo.name }}</p>
  <p>{{ userInfo.age }}</p>
</template>
<script>
export default {
  data(){
    return{

    }
  },
  props:["title", "demo", "age", "names", "userInfo"]
}
</script>



<style scoped>

</style>
<template>
 <h3>Parent</h3>
  <Child :title="message" :age="age" :names="names" :userInfo="userInfo"/>
</template>
<script>
  import Child from "@/components/Child.vue";
  export default {
    data(){
      return{
        message:"!",
        age: 10,
        names:["iwen","ime", "arry"],
        userInfo:{
          name:"iwen",
          age:20,
        }
      }
    },
    components:{
      Child
    }

  }
</script>
<style scoped>

</style>

组件传递Props效验

Vue组件可以更细致的声明细致的声明对传入的props的效验要求。

在这一节讲了怎么通过校验的方式去判断接收到的数据是不是自己想要的类型，然后就是可以设置默认值，如果没有这个数据的话，自己就设计一个，另一个方面，然后就是必选项，需要注意的是：props是只读的。

<template>
 <h3>ComponentA123</h3>
  <ComponentB :title="title" :age="age" :names="names" />
</template>
<script>
import ComponentB from "./ComponentB.vue";
export default {
  data(){
    return{
      title:"测试",
      age:"sdfds",
      names: ["123","342"]

    }
    //数字和字符串可以直接default，但是数组和对象，必须通过工厂函数返回默认值
  },
  components:{
    ComponentB
  }

}
</script>

<style scoped>

</style>
<template>
  <h3>ComponentB</h3>
  <p>{{title}}</p>
  <p>{{age}}</p>
  <p v-for="(item, index) of names" :key="index">{{item}}</p>
</template>
<script>

export default {
  data(){
    return{

    }
  },
  props:{
   title:{
     type:[String,Number, Object],
     //必选项
     required:true
   },
    age:{
     type: Number,
     default: 0
    },
    names:{
     type:Array,
      default(){
       return ["空"]
      }
    }
  },


}

</script>

<style scoped>

</style>

组件事件

在组件的模版表达式中，可以使用$emit方法触发自定义事件

提示：

组件之间传递数据的方案：

1. 父传子：props
2. 子传父：自定义事件（this.$emil）

<template>
  <h3>组件事件</h3>
  <Child @someEvent="getHandle"/>
  <p>父元素:{{message}}</p>
</template>
<script >
  import Child from "@/components/Child.vue";
  export default {
    data(){
      return{
        message:""
      }
    },
    components:{
      Child
    },
    methods:{
      getHandle(data){
        console.log("出发了",data);
        this.message = data;
      }
    }
  }
</script>


<style scoped>

</style>
<template>
  <h3>Child</h3>
  <button @click="clickEventHandle">传递数据</button>
</template>

<script>
export default {
  methods:{
    clickEventHandle(){
      //自定义事件
      this.$emit("someEvent","Child数据")
    }
  }
}
</script>



<style scoped>

</style>

组件事件配合v-model使用

<template>
<h3>Main</h3>
  <p>搜索内容为：{{search}}</p>
  <SearchComponent @searchEvent="getSearch"/>
</template>
<script>
import SearchComponent from "@/components/SearchComponent.vue";
export default {
  data(){
    return{
      search:""
    }
  },
  components:{
    SearchComponent
  },
  methods:{
    getSearch(data){
      this.search  = data;
    }
  }
}
</script>



<style scoped>

</style>
<template>
 <input type="text" v-model="search">
</template>
<script>
export default {
  data(){
    return{
        search:""

    }
  },
  watch:{
    search(newValue, oldValue){
      this.$emit("searchEvent", newValue)
    }
  }
}

</script>



<style scoped>

</style>

组件数据传递

props和自定义事件

1. prop：父传子
2. 自定义事件：子传父

props也可以子传父

<template>
  <h3>ComponentA</h3>
  <ComponentB title="标题" :onEvent="dataFn"/>
  <p>{{message}}</p>
</template>

<script>
import ComponentB from "@/components/ComponentB.vue";
 export default {
   data(){
     return{
       message:""
     }
   },
   components:{
     ComponentB
   },
   methods:{
     dataFn(data){
       console.log(data)
      this.message = data
     }
   }
 }

</script>


<style scoped>

</style>
<template>
  <h3>ComponentB</h3>
  <p>{{title}}</p>
  <p>{{onEvent('传递数据')}}</p>
</template>
<script>
export default {
  data(){
    return{
      message:""
    }
  },
  props:{
    title:String,
    onEvent:Function
  }

}
</script>



<style scoped>

</style>

透传Attributes

传递给一个组件，却没有被该组件声明为props或emits的attribute或者v-on事件监听器

<template>
 <AttrComponents class="attr-container"/>

</template>
<template>
<!--  必须是唯一根元素-->
<h3>透传属性</h3>
</template>

<script setup>

</script>


<style scoped>
 .attr-container{
   color: red;
 }
</style>