vue组件通信

// 父组件parent.vue
<template>
  <div class="parent">
    <child :fruits="fruitList"></child>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  name: 'parent',
  components: { child },
  data() {
    return {
      fruitList: ['苹果', '桃子', '橘子', '西瓜']
    }
  }
}
</script>

// 子组件child.vue
<template>
  <div>
    <span v-for="(item, index) in fruits" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['fruits']
}
</script>

prop 只读，不可被修改

// 父组件parent.vue
<template>
  <div class="parent">
    <child :fruits="fruitList" @onEmit="emit"></child>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  name: 'parent',
  components: { child },
  data() {
    return {
      fruitList: ['苹果', '桃子', '橘子', '西瓜'],
	  methods: {
	    onEmit(index) {
	      console.log(index)
	    }
	  }
    }
  }
}
</script>

// 子组件child.vue
<template>
  <div>
    <span v-for="(item, index) in fruits" :key="index" @click="emit(index)">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['fruits'],
  methods: {
    emit(index) {
      this.$emit('emit', index)
    }
  }
}
</script>

// 父组件中
<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <com-a></com-a>
    <button @click="changeA">点击改变子组件值</button>
  </div>
</template>

<script>
import ComA from './test/comA.vue'
export default {
  name: 'HelloWorld',
  components: { ComA },
  data() {
    return {
      msg: 'Welcome'
    }
  },

  methods: {
    changeA() {
      // 获取到子组件A
      this.$children[0].messageA = 'this is new value'
    }
  }
}
</script>

// 子组件中
<template>
  <div class="com_a">
    <span>{{messageA}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageA: 'this is old'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.msg;
    }
  }
}
</script>

// 父组件 app.vue

<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.name);  // Vue.js
      comA.sayHello();  // hello
    }
  }
</script>

// 子组件 A.vue

export default {
  data () {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}

// EventBus.js

import Vue from 'vue'
export const EventBus = new Vue()

// a.vue
<script>
import {EventBus} from './EventBus.js'
export default {
  data(){
    return{
      num:1
    }
  },

  methods:{
    clickHandle(){
      EventBus.$emit('add', {
        num:this.num++
      })
    }
  }
}
</script>

// b.vue
<script>
import {EventBus} from './EventBus.js'
export default {
  data(){
    return{
      num1:0
    }
  },

  methods:{
    clickHandle(){
      EventBus.$on('add', num=>{
      	this.num1 = num
      })
    }
  }
}
</script>

// Index.vue

<template>
  <div class="hello">
    <Child>
      <template v-slot:apple="slotProps">
      	<p>{{slotProps.apple.msg}}</p>
      	<p>{{slotProps.tips}}</p>
      </template>
      <template v-slot:banana><p>这个是banana</p></template>
      <template v-slot:orange><p>这个是orange</p></template>
      <template ><p>这个是没有指定具名插槽的内容</p></template>
      <template ><p>这一个也是没有指定具名插槽的内容</p></template>
    </Child>
  </div>
</template>

// Child.vue

<template>
  <div class="hello">
    <ul>
      <li><span>列表1</span>vue</li>
      <slot name="apple" :apple="apple" :tips="tips"></slot>
      <li><span>列表项2</span>vue</li>
      <slot name="banana"></slot>
      <li><span>列表项3</span>vue</li>
      <slot name="orange"></slot>

      <br>
      <p>这里是默认插槽</p>
      <slot></slot>
      
      <br>
      <p>这里是名为 default 的具名插槽</p>
      <slot name="default">默认插槽其实也是一个具名插槽，名称为 default</slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      apple: {
        msg: "我是一个苹果"
      },
      tips: "我很甜"
    };
  },
};
</script>

具名插槽的缩写

<template #apple></template>

解构赋值

<template #apple="{ apple }"></template>

// main.js
import store from '"@/store/store.js' 

new Vue({
    el: '#app',
    store, //将store暴露出来
    template: '<App></App>',
    components: { App }
});

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  // 初始化A和B组件的数据，等待获取
  me: {
  	name: '小小',
  	age: 12
  }
},
const getters = { 
   // getters 类似 computed 
   getAge(state){
   		return state.me.age
   }
},
const mutations = {
	// 同步操作的方法
	addAge(state,num){
		state.me.age+=num
	},
	handle(state){
		return state.me
	}
  
},
const actions = { 
   // 异步操作的方法
   // 用法: this.$store.dispatch('方法名', 参数)
},

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

// 第一种用法
this.$store.state.me.name
this.$store.commit('addAge',1)

// 第二种
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
computed:{
	...mapState({
	age1: state => state.me.age
	}),
	// ...mapState(['me'])
	...mapGetters(['getAge'])
},
methods:{
	// 第一种
	add(){
		Promise.all([this.addAge(1)]).then(() => {
          console.log(this);
        })
	},
	// 第二种
	...mapMutations(['addAge','handle'])
	// 直接 this.addAge()
	// mapActions同理
}

localStorage.setItem(key,value)  // 设置值
localStorage.getItem(key) // 读取值

父子组件通信：props、 $parent / $children、 ref /refs
非相关组件通信： eventBus、vuex