Vue小tips-d05

1、组件通信

流程：

• 创建项目          vue init webpack mydemo
• 清空工作          
• 创建parent文件夹-->parent.vue/child.vue
• 把child.vue引入到parent.vue中
• 把parent文件夹中的parent.vue引入到App.vue中

 

a.父传子

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

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

 

b.子传父

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

 

c.非父子

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)
    })
}

 

总结：

1. 父传子：给父组件中的子组件绑定属性，子组件通过props接收
2. 子传父：给子组件绑定方法，通过$emit绑定方法名。在父组件中绑定约定的方法名即可.

 

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>

 

3、slot (插槽)

1.无名插槽

<v-one>组件内容</v-one>

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

 

2.具名插槽

<v-two>
    <div slot='aa'>aa</div>
    <div slot='bb'>bb</div>
</v-two>

　　在子组件中v-two中

<slot name='aa'></slot>

 

4、ref

1.主要是用来获取DOM元素

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

2.获取组件

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

 

5、jquery

• 安装 npm i jquery --save
• 在需要的页面导入jquery

import $ from 'jquery'

mounted(){
    获取元素进行操作
    $('button').click(()=>{
          $('.box').fadeOut(3000)
      })
}
在<template>
    <div>
     <div class="box"></div>
    <button>点击淡出</button>
    </div>
</template>