Vue速成day05--组件通信

cnpm安装

1、检查电脑中是否有cnpm
cnpm -v
2、如果没有cnpm的话就安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、检查是否有cnpm了
cnpm -v
4、配置环境变量
找到nodejs\node_global这个文件添加到环境变量path当中

父子组件通信（父传子）

父组件通过自定义属性传值，子组件通过props接收

// 父组件
<v-child :info="name"></v-child>
// 子组件
export default {
	props:["info"]
}

1、父传子是单向数据流
2、默认：父变，子变；子变，父不变，并且还会报错
3、通过生命周期把父级给我值设置为我自己的msg。父变，子不变；子变，父不变，不会报错。
4、如果想要实现父变子变；子变父变，还不报错，那么就传递一个json类型

props验证

  props:{
    info:{
      // 必传
      required:true,
      // 传递数据类型
      type:String
    },
    age:{
      //设置默认值
      default(){
        return 50
      }
    }
  }

子父组件通信（子传父）

子组件想要修改父组件的数据
子传父，通过自定义事件实现；父组件可以通过e获取到子组件传的值

// 子组件
export default {
  methods: {
   toggle(){
     this.$emit('cancle','孙尚香')
   } 
  }
}
// 父组件
<v-child @cancle="toggle"></v-child>
methods:{
	toggle(e){
		console.log(e)
	}
}

非父子组件通信(兄弟组件)

单一事件管理

// main.js
Vue.prototype.Event = new Vue()
// 发送者
methods: {
  send(){
    this.Event.$emit("sendA",this.name)
  } 
}
// 接受者
mounted: {
	this.Event.$on("sendA",(e)=>{
		console.log(e)
	})
}

vuex
存储：localStrage、sessionStrage

ref

ref被用来给元素或者子组件注册引用信息。引用信息将会注册在父组件的$refs上。如果是普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向子组件的实例。

<div class="smBox" ref="pink"></div>
<button @click="getPink">点击获取粉盒子</button>
<hr>
<v-child ref="getChild"></v-child>
<button @click="getChild">点击获取子组件</button>

methods: {
  getPink(){
    this.$refs.pink.innerHTML = '哈哈哈，我就是那个粉盒子'
  },
  getChild(){
    this.$refs.getChild.toggleName()
  }
}

scoped

样式局部作用

<style scoped>

</style>

is

  <!-- 1、is解决固定搭配 -->
  <ul>
    <li is="v-a"></li>
  </ul>
  <hr>
  <!-- 2、动态组件 -->
  <div :is="hahaha"></div>
  <button @click="hahaha='vA'">vA按钮</button>
  <button @click="hahaha='vB'">vB按钮</button>
  
  data(){
	  return {
		hahaha:vA
	  }
  }

animate.css

// 1、安装animate.css
npm i animate.css --save
// 2、在main.js中引入
import "animate.css"
// 3、使用
<transition enter-active-class="animate__animated animate__bounceInDown">
  <div :is="hahaha"></div>
</transition>

slot

1、匿名插槽
①如果没有内容，就不展示
②如果有内容，就直接展示在slot所在的位置
③如果有很多内容，全部展示在slot所在的位置

// 父组件
 <v-child>
   <p>庄生晓梦迷蝴蝶</p>
   <p>望帝春心托杜鹃</p>
 </v-child>
// 子组件
 <div>
	this is child
	<slot></slot>
 </div>

2、具名插槽

// 父组件
 <v-child>
   <p slot="one">锦瑟无端五十弦</p>
   <p slot="two">一弦一柱思华年</p>
 </v-child>
// 子组件
 <slot name="two"></slot>
 <slot name="one"></slot>

jQuery

// 1、安装
npm i jquery --save
// 2、在main.js中引入
import $ from "jquery"
Vue.prototype.$ = $
// 3、使用
this.$('.btn1').click(()=>{
  this.$('.smbox').slideDown(2000)
})
this.$('.btn2').click(()=>{
  this.$('.smbox').slideUp(2000)
})

面试题

1、列举出在vue中组件的定义方式有哪几种？
2、组件中的data为什么必须是函数？
3、vue-cli中怎样定义和使用组件？
4、vue中组件之间如何进行传值，有哪几种方式？
5、vue中如何使用jquery？
6、vue的is这个属性你有用过吗？主要用在哪些方面？
7、vue中的ref是什么？如何使用ref？
8、说说你对slot的理解