组件通信

父传子

特点

总结：1.父传子：传递的是基础数据类型  给父组件中的子组件绑定属性，此时属性的值在父组件中已经定义，子组件需要通过porps接收,要用数组接收  在子组件中直接渲染接收到的值即可
​
2.父传子:子修改父组件传递的值报错,如果解决，把父组件传递过来的值变为自己的属性，直接修改自己属性即可。后果：父组件修改不会影响自己的数据
​
3.父传子:父变，子变，子变，父变，需要在父组件中定义对象，传递给子组件的就是对象的方式，子组件正常接收即可

<v-one :title='大奔'></v-one>
//v-one为子组件模板
//子组件中
props:['title']

子传父

特点

子组件通过this.$emit触发方法

//子组件中
<button @click = 'send'>点击</button>
methods:{
    send(){
        this.$emit('give',5)
    }
}
​
//父组件   v-two为子组件模板
<v-two @give = 'show'></v-two>
methods:{
    show(e){
        console.log(e);
    }
}

非父子

特点

首先创造关系， main.js->Vue.prototype.Event=new Vue()

总结:发送数据用 $emit 需要触发条件 接收数据用$ona.Vue

Vue.prototype.Event = new Vue()
this,Event.$emit('方法',参数)
this.Event.$on('方法',(e)=>{
    console.log(e)=>e为参数
})

is

特点

1.解决标签的固定搭配问题

2.动态组件。

<ul>
    <li :is='div'>这是一个li<div>这是一个div</div></li>
    //直接显示div
<ul>

slot

特点

1.无名插槽
在子组件中添加<slot></slot>
在slot.vue
<v-one>
<div>我就是插入到one组件中的内容1111</div>
<div>我就是插入到one组件中的内容22222</div>
</v-one>
在one.vue
<!-- 无名插槽 -->
<slot></slot>   
one
<slot></slot>

2.具名插槽
在slot.vue中
 <v-two>
 <div slot="aa">白日依山尽</div>
 <div slot="bb">黄河入海流</div>
 <div slot="cc">欲穷千里目</div>
 <div slot="dd">更上一层楼</div>
 <p>我是新增加的</p>
 </v-two>
 在two.vue中
 <div>
     <slot name='aa'></slot>
     <slot name='bb'></slot>
     two
     <slot name='cc'></slot>
     <slot name='dd'></slot>
     <slot></slot>
 </div>

ref

1.ref 操作普通元素  就是获取到的dom元素
2.ref 操作的组件    获取的就是组件的数据和方法
3.使用ref  需要通过this.$refs来获取
​
在ref.vue中
<template>
<div>
    <div class="box" ref='box'></div>
    <v-one ref='one'></v-one>
    这是从one组件拿回来的数据{{myMsg}}
</div>
</template>
<script>
import vOne from './one'
export default {
components:{
    vOne
 },
data () {
 return {
     myMsg:''
 }
},
methods:{
},
mounted(){
    // 总结：1.对于普通元  ref ->$refs来获取元素，获取之后就是普通的dom元素.
    // console.log(this.$refs.box.offsetWidth)
    console.log(this.$refs.one.fn())
    console.log(this.$refs.one.msg)
    this.myMsg = this.$refs.one.msg
}
}
</script>
<style>
.box{
    width: 100px;
    height: 100px;
    background: red;
}
</style>

jquery

1.npm  install jquery --save
2.哪个页面需要直接导入即可  
import $ from 'jquery'
mounted(){
	$('button').click(()=>{
		$('.box').width()
	})
}
3.全局导入
在main.js 
import $ from 'jquery'
Vue.prototype.$ = $;
//此时这个$是vue实例中的一个属性，所以需要通过this调用
this.$('button').click(()=>{
		this.$('.box').width()
})