Vue中的组件通信、ref、jquery、is属性、slot插槽

最新推荐文章于 2024-02-08 10:28:07 发布

还凶

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量138

点赞数

分类专栏： Vue中的组件通信、ref、jquery、is属性和slot插槽文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/haiXio_495/article/details/112383948

版权

本文详细介绍了Vue中组件通信的多种方式，包括父子组件间的数据传递、使用$emit的子传父、以及通过props的父变子变。深入探讨了is属性的应用，如解决标签固定搭配和实现动态组件。同时讲解了slot插槽的无名和具名用法，以及如何通过ref属性来操作DOM和组件。最后简述了在Vue中引入和使用jQuery进行元素操作。

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

Vue中的组件通信、ref、jquery、is属性、slot插槽

组件通信

1、父子组件:传递基本数据类型，通过绑定自定义属性，子组件通过props接收

a.父变子变直接传递基本数据类型
b.子变父变直接报错解决方法：直接把父组件传递过来的值存储为自己的变量值
c.父变子变，子变父变传递一个对象由于传递的是对象，而对象传递的是地址，所以父子同时操作的是同一个地址

//父组件
<template>
<div>
    想要给子组件的礼物-----{
  {gift}}
    <input type="text" v-model="gift">
    <input type="text" v-model="toSon.sonGift">
    <hr>
    <v-child :gift='gift' :toSon='toSon'></v-child>
</div>
</template>
<script>
import vChild from './child'
export default {
    
components:{
    
    vChild
 },
data () {
    
 return {
    
     gift:'豪车',
     toSon:{
    
         sonGift:'金币'
     }
 }
},
methods:{
    
},
mounted(){
    
}
}
</script>
<style scoped>
</style>