Vue-day05

2024-03-28 12:47:40

1.组件通信

流程:

1.创建项目 vue init webpack mydemo

2.清空工作

3.创建parent文件夹-》parent.vue/child.vue

4.把child.vue引入到parent.vue中

5.把parent文件夹中的parent.vue引入到App.vue中

1.1 父传子

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

父变子变直接传递基本数据类型

子变父变直接报错解决方法：直接把父组件传递过来的值存储为自己的变量值

父变子变，子变父变传递一个对象由于传递的是对象，而对象传递的是地址，所以父子同时操作的是同一个地址

1.2 子传父

子传父绑定方法$emit(方法名，参数)

总结：

子传父绑定方法$emit(方法名，参数)
子传父:给子组件绑定方法，通过$emit绑定方法名。在父组件中绑定约定的方法名即可.

1.3 非父子

1.首先在vue原型上定义一个属性，用来关联所有的vue的组件
Vue.prototype.Event = new Vue()
2.one->two 传值
在one组件中绑定事件
 <button @click="sendTwo">发送给two的数据</button>
 methods:{
    sendTwo(){
        // 发送数据$emit
        this.Event.$emit('sendTwo',this.msg)
    }
}
在two组件中无条件接受 （mounted）
mounted(){
    // 接收数据$on
    this.Event.$on('sendTwo',(e)=>{
        console.log(e)
    })
}

2.is

解决标签的固定搭配

1. ul>li  此时给li绑定 is属性  (<li is='vOne'></li>)   那么此时就是把li替换为组件vOne的内容

动态组件

2.动态组件 首先在data中定义一个变量(name) 给name：'vOne'
 <!-- 用来展示组件内容 -->
 <div :is='name'></div>
 
 效果是点击one展示one的内容，点击two展示two内容 所以此时需要两个按钮
 <!-- 动态组件 -->
 <button @click="name='vOne'">one</button>
 <button @click="name='vTwo'">two</button>

练习:完成tab切换(至少3组)

<template>
  <div>
    <ul class="nav">
      <li @click="name = 'vOne'">one</li>
      <li @click="name = 'vTwo'">two</li>
      <li @click="name = 'vThree'">three</li>
    </ul>
    <div :is="name"></div>
   
  </div>
</template>
<script>
import vOne from './one'
import vTwo from './two'
import vThree from './Three'
export default {
    data(){
        return{
            name:'vOne'
        }
    },
    components:{
        vOne,
        vTwo,
        vThree
        
    },
};
</script>

3.slot (插槽)

无名插槽

<v-one>组件内容</v-one>
在子组件v-one组件中写<slot></slot> 在组件内容的前后都可以

具名插槽

<v-two>
    <div slot='aa'>aa</div>
    <div slot='bb'>bb</div>
</v-two>
在子组件中v-two中
<slot name='aa'></slot>

4.ref

主要是用来获取DOM元素

给元素绑定ref属性(ref='box') 通过this.$refs.box 来获取当前元素

获取组件

给元素绑定ref属性(ref='one') 通过this.$refs.box 来获取当前组件，那么此时可以使用组件中的属性和方法

5.jquery

1.安装 npm i jquery --save
2.在需要的页面导入jquery
import $ from 'jquery'
mounted(){
    获取元素进行操作
    $('button').click(()=>{
          $('.box').fadeOut(3000)
      })
}
在<template>
    <div>
     <div class="box"></div>
    <button>点击淡出</button>
    </div>
</template>

码农公寓