1 props
父组件 Father 子组件 Son
//父组件给子组件传递参数
<Son name="何世蟒" sex="男" :age="22" />
//子组件接收参数
//方式一
props:['name','sex','age']
//方式二 限制接受数据的数据类型
props:{
name:String,
age:Number,
sex:String,
}
//方式三 限定参数 默认值 以及必要性
props:{
name:{
type:String, //限定数据类型
required:true, //是否必须
}，
age:{
type:Number，
default:18, //默认值18
}
}
///////////////////////////////////////////////////
//注意：props 子组件给父组件传递参数
// 1.在父组件中定义一个函数
methods:{
getSonData(testData){
console.log("父组件接收到子组件数据"，testData)
}
}
//2.函数传给子组件
<Son :getSonData="getSonData"/>
//3.子组件接收函数
props:['getSonData']
//4.子组件通过任意方式调用该函数并传递参数
data(){
return{
testData:'我是子组件数据'
}
}
mounted(){
this.getSonData(this.testData)
}
/////////////////////////////////////////////////////////////////////////////
//注意路由也可以props传递参数
//路由luYou1给luYou2传递参数
//原始方法
{
name:'luYou1'
path：'/luyou1',
component:LuYou1,
}
{
name:'luYou2'
path：'/luyou2',
component:LuYou2,
}
// 在luYou1中
<router-link
:to="{
name:'luYou2',
query: {wo:dataList.wo , shuju:dataList.shuju },
}"
>点击我给路由2传递参数</router-link>
data(){
return{
dataList:{
wo:'我是'
shuju：'数据'
}
}
}
//在luYou2中
<template>
<h2> {{$route.query.wo}} {{$route.query.shuju}} </h2>
</template>
////////////////////////////////////////////////////////////
//路由luYou1给luYou2传递参数
//路由写法
{
name:'luYou2'
path：'/luyou2',
component:LuYou2,
//第一种写法
props：{wo:'我是写死',shuju:'的数据'}//此时wo和shuju中的数据为死数据
}
//在luYou2中
<template>
<h2> {{wo}} {{shuju}} </h2>
</template>
props['wo','shuju']
// props第二种写法////////////////////////////////////////////////
{
name:'luYou2'
path：'/luyou2/:wo/:shuju',
component:LuYou2,
//第二种
props:true//若props为真，则会将路由所接收的所有params参数以props形式传给luYou2
}
//luYou1中
<router-link
:to="{
name:'luYou2',
params: {wo:dataList.wo , shuju:dataList.shuju },
}"
>点击我给路由2传递参数</router-link>
//luYou2中
<template>
<h2> {{wo}} {{shuju}} </h2>
</template>
props['wo','shuju']
//props第三种写法////////////////////////////////////////////////////
{
name:'luYou2'
path：'/luyou2',
component:LuYou2,
//第三种
props($route){
return{ wo:$route.query.wo , shuju:$route.query.shuju }
}
}
//luYou1中
<router-link
:to="{
name:'luYou2',
query: {wo:dataList.wo , shuju:dataList.shuju },
}"
>点击我给路由2传递参数</router-link>
//luYou2中
<template>
<h2> {{wo}} {{shuju}} </h2>
</template>
props['wo','shuju']
2 自定义事件
//一 子组件给父组件传信
//1.在父组件中给子组件绑定一个自定义事件，事件名ziDingYiShiJIan
//绑定的方法名 getSonData
<Son v-on:ziDingYiShiJIan="getSonData" />
<Son @ziDingYiShiJIan="getSonData" />
<script>
//2.编写方法 getSonData
methods:{
getSonData(testData){
console.log('我是Son组件传来的数据'，testData)
}
}
//3.在子组件中通过任意方式触发自定义事件
data(){
return{
testData:'我是子组件数据'
}
}
mounted(){
//$emit 调用自定义事件 第一个参数为事件名，后面跟参数
this.$emit('ziDingYiShiJIan',this.testData)
}
/////////////////////////////////////////////////////////
// 一 父组件给子组件绑定自定义事件 可以通过ref绑定
//1.它通过ref绑定
<Son ref="son">
//2.在生命周期mounted中拿到ref的Son
mounted(){
//this.$refs.son 拿到子组件Son的实例对象
//$on 在实例对象上绑定自定义事件
//事件名ziDingYiShiJIan 回调函数 getSonData
this.$refs.son.$on('ziDingYiShiJIan',getSonData)
}
//3.在Son组件中触发该自定义事件触发方式如上一致
</script>
3 全局事件总线 $bus
<script>
//理解式 甲方给第三方绑定自定义事件 乙触发甲方给第三方绑定的自定义事件
//1. 在main.js中定义第三方组件 Demo
const Demo = Vue.extend({})
//2.将Demo组件进行使用 因没办法<Demo/>标签式使用，此处实例化一个Demo
const d =new Demo()
//3.给vue原型对象Vue.prototype添加x属性
//将实例化的Demo组件d放在vue的原型对象上prototype的x属性上
Vue.prototype.x=d
//4.组件甲发送数据
// 在组建甲中触发第三方绑定的事件
data(){
return{
testData:'我是组件甲中的数据'
}
}
this.x.$emit('fangFa',this.testData)
//5.组件乙接收数据
// 在组建乙中给第三方绑定一个自定义事件，并调用一个函数
this.x.$on('fangFa',(testData)=>{
console.log('我是组件乙，我接收到数据',testData)
})
///////////////////////////////////////////////////////////////
//正规格式
new Vue({
el: '#app',
components: { App },
template: '<App/>',
beforeCreate(){//生命周期钩子 组件数据代理之前
Vue.prototype.$bus=this//全局事件总线 此处的$bus为上方的x
},
beforeDestroy(){//生命周期钩子组件销毁前
this.$bus.$off('事件名')，//销毁指定自定义事件
this.$bus.$off()，//销毁全部自定义事件
}
})
</script>
4 发布与订阅 pubsub-js
pubsub.js ------ publish 发布 subscribe 订阅
<script>
//1. 安装pubsub-js
// npm i pubsub-js
//2.在使用的组件中引入pubsub-js
import pubsub from 'pubsub-js'
//3.订阅消息 收到数据 相当于绑定事件
mounted(){
pubsub.subscribe('xiaoxi',(msgName,testData)=>{
//此时函数的第一个参数msgName为消息名xiaoxi，第二个参数才是数据
console.log('有人发布了xiaoxi,xiaoxi的回调执行了'，testData)
})
}
//4.发布消息
data(){
return{
testData:"我发布了消息"
}
}
pubsub.publish('xiaoxi',this.testData)
//5.取消订阅的消息
beforeDestroy(){
//消息订阅时每一个订阅的消息有一个id
//将订阅消息的id赋给pubId
//this.pubId= pubsub.subscribe('xiaoxi',(msgName,testData)=>{
//console.log('有人发布了xiaoxi,xiaoxi的回调执行了'，testData)
//})
pubsub.unsubscribe(this.pubId)//取消订阅参数为每个订阅的返回值id
}
</script>
5 Vuex
1 vuex的安装及创建
<script>
//1.安装vuex
// npm i vuex@3
//2.在src目录下创建store文件夹 并创建index.js文件
import Vue from 'vue' //在index文件中引入vue
import Vuex from 'Vuex' //在index文件中引入vuex
Vue.use(Vuex) //使用Vuex插件
const state={} //储存vuex中的数据
const mutation={} //用于操作state 中的数据
const actions={} //响应组件中的动作
const getters{} //对state中的数据进行处理
// 创建store对象并对外暴露
export default new Vuex.Store({
state,
mutation,
actions,
getters，
})
//3.在main.js中引入文件夹store
import store from './store'
//4.在vue实例化中添加$store
new Vue({
el: '#app',
components: { App },
template: '<App/>',
store, //添加$store
})
</script>
2 vuex的使用
<script> //store文件夹index.js 中 const state={ //储存vuex中的数据 testData：'我是vuex中的数据'， num：20 } const mutation={ //用于操作state 中的数据 //第一个参数为对象包含state中的全部数据 //第二个为传过来的值 SETSTATEDATA(state,value){ state.testData=value//③给state中的的数据data赋值 } } const actions={ //响应组件中的动作 //第一个参数是一个对象，第二个参数是传来的数据 setStateData(context,value){ //② 将调用mutation中的SETSTATEDATA，将数据传过去 context.commit('SETSTATEDATA',value) } } const getters={ updata(state){//对data中的数据进行操作 state.num=state.num-1 } } //组件中修改vuex的数据 data(){ return{ setData:'把我赋值给state中的testData' } }， mounted(){ fuZhi(){ //① 调用Vuex中的actions中的方法 this.$store.dispatch('setStateData',this.setData) //因为只是单纯的修改数据可以不经过actions进行响应动作 //可以略过setStateData的调用直接写为跳过②直接③ this.$store.commit('SETSTATEDATA',this.setData) } }, //组件中读取state中的数据 读取getters中的数据 this.$store.state.testData this.$store.getters.updata ----------------------------------------------------------------- //组件中读取vuex中的数据进行简写 computed:{ testData(){ return this.$store.state.testData }, updata(){ return this.$store.getters.updata } }, //此时读取时只需要读取 this.testData() //再次简写在读取数据的vue组件中引入 import { mapState,mapGetters,mapMutations，mapActions} from 'vuex' computed:{ //第一个testData指组件计算方法中定义的函数名 //第二个testData vuex state中的变量testData的名子 //... 表示将mapState中的对象中的属性添加到computed中 ...mapState({testData:'testData'})， //第一种对象写法 //此时生成的计算属性明在与读取的属性名一致都为testData ...mapState(['testData'])， //第二种数组写法 //读取getters中的数据简写 ...mapGetters({updata:'updata'}) //第一种对象写法 ...mapGetters(['updata'])， //第二种数组写法 } //此时读取时只需要读取 this.testData() this.updata() -------------------------------------------------------------------- //修改vuex中数据简写 引入mapMutations //原来写法 //fuZhi(){ // this.$store.commit('SETSTATEDATA',this.setData) //} //修改后 methods:{ ...mapMutations({fuZhi:'SETSTATEDATA'}) //第一种对象写法 //此时按原代码走仍会报错因为原代码函数不含参数 //没有传递参数，mapMutations不知道传的参数为this.setData，则报错 //将函数出发改为传参函数，并通过事件触发 //methods：{ // fuZhi(setData){ // this.$store.commit('SETSTATEDATA',this.setData) // } //}, //mounted(){ fuZhi(this.setData) } //此时即可 ...mapMutations(['SETSTATEDATA']) //第二种数组写法 //数组写法时组件中生成的函数名也为 SETSTATEDATA //mounted(){ SETSTATEDATA(this.setData) } } ----------------------------------------------------------------------- //原来写法 //fuZhi(){ // this.$store.dispatch('setStateData',this.setData) //} //修改后 methods:{ ...mapActions({fuZhi:'setStateData'}) //第一种对象写法 //此时仍会出现传参问题 需要改为传参函数 //mounted(){ fuZhi(this.setData) } ...mapActions(['setStateData']) //第二种数组写法 //mounted(){ setStateData(this.setData) } } </script>
6 插槽
1 默认插槽
//父组件中
<Son>
<h1> 让我在Son组件中显示1 </h1>
</Son>
//子组件中
<template>
<div class="category">
<slot> 我是默认数据，父组件中没有数据过来时默认显示我 </slot>
</div>
</template>
2 具名插槽
//父组件中
<Son>
<h1 slot="filst">让我在Son组件中显示1 </h1>
</Son>
<Son>
<h1 slot="two">让我在Son组件中显示2 </h1>
</Son>
<Son>
<template v-slot:three> //相当于外层套了一个div 只不过该标签浏览器解析时不显示
// v-slot:three 与 slot="three" 一样，但前者只能在template标签中使用
<h1>让我在Son组件中显示3</h1>
<h1>让我在Son组件中和3一起显示</h1>
</template>
</Son>
//
//子组件中
<template>
<div class="category">
<slot name="filst"> 我是默认数据，父组件中没有数据过来时默认显示我1 </slot>
<slot name="two"> 我是默认数据，父组件中没有数据过来时默认显示我2 </slot>
<slot name="three"> 我是默认数据，父组件中没有数据过来时默认显示我3</slot>
</div>
</template>
3 作用域插槽
//父组件中
<Son>
//getTestData是一个对象，含有子组件Son传来的数据testData
<template :slot-scope="getTestData">
<h1>{{getTestData.testData}} </h1>
</template>
</Son>
<Son>
//getTestData是一个对象，含有子组件Son传来的数据testData
<template :slot-scope="{testData}">
//:slot-scope="{testData} 机构赋值，效果和上面一样
<h1>{{testData}} </h1>
</template>
</Son>
//子组件中
<template>
<div class="category">
<slot testData:="testData"> 我是默认数据，父组件中没有数据过来时默认显示我 </slot>
</div>
</template>
data(){
return{
testData:"我是数据我在Son组件中,请将我传给父组件"
}
}