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>
1.子传父 绑定方法$emit(方法名，参数)
总结:
1.父传子: 给父组件中的子组件绑定属性，子组件通过props接收
2.子传父:给子组件绑定方法，通过$emit绑定方法名。在父组件中绑定约定的方法名即可.
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.解决标签的固定搭配 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>
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>
1.主要是用来获取DOM元素 给元素绑定ref属性(ref='box') 通过this.$refs.box 来获取当前元素 2.获取组件 给元素绑定ref属性(ref='one') 通过this.$refs.box 来获取当前组件，那么此时可以使用组件中的属性和方法
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>