Vue3组件通信

<template>
  <Child :message="message"/>
</template>
 
<script setup>
 import Child from './child.vue'
 import { ref } from 'vue'
const message=ref('父组件数据')
</script>

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
 
<script setup>
import { defineProps } from 'vue';
const props=defineProps({
  message: {
    type: String,
    required: true
  }
})
</script>

<template>
<div>
  <h2>子组件</h2>
  <p>消息-{{ message }}</p>
  <button @click="updateMessage">change</button>
</div>
</template>
 
<script setup>
 import { ref,defineExpose } from 'vue'
 const message=ref('子类的数据')
 function updateMessage() {
  message.value = '子组件的消息已更改';
}
defineExpose({ message, updateMessage });
</script>

<template>
      <Child ref="childRef" />
  <div>
  <h2>父组件</h2>
  <p>消息-{{parentMessage }}</p>
  <button @click="updateFromChild">childeMsg</button>
</div>
</template>
 
<script setup>
 import Child from './child.vue'
 import {  ref } from 'vue'
 const parentMessage = ref('父组件的初始消息');
 const childRef = ref(null);
 function updateFromChild() {
    parentMessage.value = childRef.value.message;
}
</script>

<template>
  <div>
    <h1>Top Component</h1>
    <middle-component />
  </div>
</template>
<script setup>
import MiddleComponent from './Middle.vue';
const topData = 'Data from the top component';
provide('topData', topData);
</script>

<template>
  <div>
    <h2>Middle Component</h2>
    <leaf-component />
  </div>
</template>
<script setup>
import LeafComponent from './Leaf.vue';
</script>

<template>
  <div>
    <h3>Leaf Component</h3>
    <p>Data from top: {{ topData }}</p>
  </div>
</template>
 
<script setup>
import { inject } from 'vue';
const topData = inject('topData');
</script>

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
 
const pinia=createPinia()  //创建pinia实例对象
createApp(App)
.use(pinia)   // use这个实例对象
.mount('#app')

import { defineStore } from "pinia";
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter',
  () => {
    // state
    const count = ref(0);
    // actions
    const increment = () => {
      count.value++;
    };
    const decrement = () => {
      count.value--;
    };
    const reset = () => {
      count.value = 0;
    };
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    return { count, increment, decrement, reset, doubleCount };
  },
);
export const useStore = defineStore('store', 
  () => {
    const someState=ref('hello Pinia');
    const incrementSomeState = () => {
      someState.value += '!'
    }
    return { someState , incrementSomeState }
  },
);
 

<template>
  <div>
  <h1>App</h1>
    <h1>Counter: {{ store.count }}</h1>
    <h1>Double:{{ store.doubleCount }}</h1>
    <button @click="store.increment">Increment</button>
    <button @click="store.decrement">decrement</button>
    <button @click="store.reset">reset</button>
  </div>
  <h1>String: {{ hel.someState }}</h1>
  <button @click="hel.incrementSomeState">+ ! </button>
   <Child />
</template>
<script setup>
import {useCounterStore,useStore} from '@/Pinia/counter.js' //引入定义好的状态库
import  Child from  '@/components/child.vue'
const store=useCounterStore()
const hel=useStore()
</script>
 

<template>
  <div>
    父组件:
  </div>
  <button @click="updata">上传数据到Storage</button>
  <Child />
</template>
 
<script setup>
import Child from './components/demo4/child.vue';
import { ref } from 'vue';
 
const data1=ref('父组件的数据localStorageData')
const data2=ref('父组件的数据sessionStorageData')
 
const updata=()=>{
  localStorage.setItem('localApp',data1.value)
  sessionStorage.setItem('sessionApp', data2.value);
}
</script>
 

<template>
  <div>
  子组件
  </div>
  <button @click="getData">获取local到数据</button>
  <h2>{{ data1 }}</h2>
  <h2>{{ data2 }}</h2>
</template>
 
<script setup>
import { ref } from 'vue';
const data1=ref('')
const data2=ref('')
const getData = ()=>{
  data1.value=localStorage.getItem('localApp')
  data2.value=sessionStorage.getItem('sessionApp')
}
</script>

<template>
  <div>
  子组件数据-{{ data }}
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
const data=ref('子组件的数据是100')
window.ChildData=data;
</script>
 

<template>
  <div>
    父组件:
  </div>
  <button @click="updata">获取子组件的数据</button>
  <h1>{{ data }}</h1>
  <Child />
</template>
 
<script setup>
import Child from './components/demo4/child.vue';
import { ref } from 'vue';
const data=ref('')
const updata=()=>{
  data.value=window.ChildData
}
</script>