Vue-day05

1.组件通信

创建流程

1、创建目录vue init webpack mydemo

2、完成清空工作

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

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

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

a.父传子

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

// props:接收父组件传递过来的属性
props: ["gift"],
mounted(){
//注意父组件传递过来的数据可以直接获取

      console.log(this.gift)

  }

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

<div>
      想要给儿子的礼物-----{{gift}}
      <input type="text" v-model="gift">
      <v-child1 :gift='gift'></v-child1>
  </div>

b.子变父变 直接报错 解决方法：直接把父组件传递过来的值存储为自己的变量值 注:只能解决报错问题

//子变父变 直接报错
    <div>这是父组件传递出来的数据--{{gift}}</div>
    <input type="text" v-model="gift">
//解决方法

<script>
export default {
    // props:接收父组件传递过来的属性
  props: ["gift"],
  data(){
      return{
          mygift:''//存储父组件传递过来的数据可以直接获取
      }
  },
  components: {


  },
  mounted(){
    //   注意父组件传递过来的数据可以直接获取
      console.log(this.gift)
      this.mygift=this.gift
  }
};
</script>

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

<v-child1 :gift='gift' :toSon='toSon'></v-child1>

<script>

import vChild1 from './child1'

export default {

  data() {

    return {

      gift:'大奔',

      toSon:{

        sonGift:'QQ'

      }

    }

  },

  components: {

    vChild1,

  },

};

</script>

//孩子组件

<script>

export default {

    // props:接收父组件传递过来的属性

  props: ["gift",'toSon'],

  data(){

      return{

          mygift:''//存储父组件传递过来的数据可以直接获取

      }

  },

  components: {

  },

  mounted(){

    //   注意父组件传递过来的数据可以直接获取

      console.log(this.gift)

      console.log(this.toSon)

      this.mygift=this.gift

  }

};

</script>

b.子传父

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

 总结:

1.父传子: 给父组件中的子组件绑定属性，子组件通过props接收
2.子传父:给子组件绑定方法，通过$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)
    })
}

2.is

1.解决标签的固定搭配
2.动态组件
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

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>