【BlogAdmin升级3】组件通讯与引用

<script setup>
// 由于写setup,所以无法直接配置props选项
// 所以需要借助"编译器宏"函数接收父组件传递的数据
const props = defineProps({
    car: String,
    money: Number,
    addMoney: Function
})
console.log(props.car)




//子传父
const emit = defineEmits(['change-Money'])
const buy = () => {
    emit('change-Money', 5)
}
</script>
<template>
    <div class="son">
        <!-- 子组件可以直接使用传递过来的数据 -->
        我是子组件 - {{ car }} - {{ money }} - <button @click="addMoney">+1</button>
        <div>  <button @click="buy">-Money</button></div>
    </div>
  
</template>
<style>
.son {
    border: 1px solid #000;
    padding: 30px;
}
</style>

<script setup>
//父传子
// 1.给子组件,添加属性方式传值
// 2.子子组件,通过props接收
import mychild from '@/components/mychild.vue'


// 传递动态值
import { ref } from 'vue';
const money = ref(100)


const addMoney = () => {
  money.value++
}




//子传父
// 1.在子组件内部,emit触发事件
// 2.在父组件通过@监听
const changeFn = (m) => {
  money.value -= m
}
</script>


<template>
  <div>
    父组件 - {{ money }} - <button @click="addMoney">+1</button>
    <mychild car="我是父组件传过来的参数" :money="money" :addMoney="addMoney" @change-Money="changeFn"></mychild>
  </div>
</template>

<script setup>
const count = 999
const sayHi = () => {
    console.log("你好")
}
defineExpose({
    count,
    sayHi
})
</script>
<template>
    <div>
        我是子组件 - {{ 999 }}
    </div>
</template>

<script setup>
import myRefChild from '@/components/my-ref-child.vue'
import { ref, onMounted } from 'vue';
// 模板引用,可以获取dom,也可以获取组件
// 1.调用ref函数,生成一个ref对象
// 2.通过ref标识进行标定
// 3.通过ref对象.value即可访问到绑定的元素(必须渲染后才能拿到)
const myInput = ref(null)


onMounted(() => {
  console.log("myInput")
  // myInput.value.focus()
})


const clickFn = () => {
  myInput.value.focus()
}




const myChild = ref(null)


const getMyDom = () => {
  console.log(myChild.value)
  myChild.value.sayHi()
}
onMounted(() => {
  console.log(myChild.value)


})
</script>


<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="clickFn">点击输入聚焦</button>


    <div>
      <myRefChild ref="myChild"></myRefChild>
      <button @click="getMyDom">获取组件信息</button>
    </div>
  </div>
</template>

<script setup>


import { inject } from 'vue';


const themeColor = inject('theme-color')


const count = inject('count')
const changeCount = inject('changeCount')
const changeFn = () => {
    changeCount(1000)
}
</script>
<template>
    <h3>我是底层组件 - {{ themeColor }} - {{ count }}</h3>
    <button @click="changeFn">更新count</button>
</template>

<script setup>
import childBottom from '@/components/child-bottom.vue'
</script>
<template>
    <h2>我是中间组件</h2>
    <childBottom></childBottom>
</template>

<script setup>
import childCenter from '@/components/child-center.vue'


import { provide, ref } from 'vue';


// 跨层传递普通数据
provide('theme-color', 'pink')


// 跨层传递响应式数据
const count = ref(100)
provide('count', count)


setTimeout(() => {
  count.value = 200
}, 2000);


//跨层级传递函数,方便子组件修改父组件的数据,提供方法进行修改
provide('changeCount', (newCount) => {
  count.value = newCount
})
</script>
<template>
  <h1>我是顶层组件 - {{ count }}</h1>
  <childCenter></childCenter>
</template>

// <script>
// export default {
//   name: "test"
// }
// </script>


<script setup>
defineOptions({
  name: 'test'
})
</script>
<template>
  <div>Hello</div>
</template>

<Child :modelValue="isVisible" @update:modelValue="isVisible=$event">

<script setup>
import { defineModel } from 'vue';
const modelValue = defineModel()
const changeFn = () => {
    modelValue.value += 1
}
</script>
<template>
    <div>
        <input type="text" :value="modelValue" @input="e => modelValue = e.target.value" />
        {{ modelValue }}
        <button @click="changeFn">子组件更新</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import myInput from '@/components/my-input.vue'


const count = ref(100)


const changeFn = () => {
  count.value += 1
}
</script>
<template>
  <div>
    <myInput v-model="count"></myInput>
    <div>{{ count }} - <button @click="changeFn">父组件更新</button></div>
  </div>
</template>

import { createApp } from 'vue'
import persist from 'pinia-plugin-persistedstate'
import { createPinia } from 'pinia'
const pinia = createPinia(); //创建pinia实例
//导入pinia持久化插件
pinia.use(persist)


import App from './App.vue'


createApp(App).use(pinia).mount('#app')

import { defineStore } from "pinia";
import { ref } from "vue";
import { computed } from 'vue';
//定义store
// defineStore(仓库唯一标识,()=>{...})


export const useCounterStore = defineStore("counter", () => {
  //声明数据 state - count
  const count = ref(100)
  //声明操作数据的方法 action(普通函数)
  const addCount = () => {
    count.value++
  }
  const subCount = () => {
    count.value--
  }
  //声明基于数据派生的计算属性 getters(计算属性computed)
  const double = computed(() => count.value * 2)
  //声明数据 state - msg
  const msg = ref("hello pinia")


  return {
    count,
    msg,
    addCount,
    subCount,
    double
  }
}, {
  //persist: true //开启持久化
  persist:{
      key:'自定义持久化key',
      paths:['count'] //定义某个变量持久化
  }
)

<script setup>


import Son1 from './components/Son1.vue';
import Son2 from './components/Son2.vue';


import { useCounterStore } from '@/store/counter.js'
const counterStore = useCounterStore();






console.log(counterStore)
</script>


<template>
  <h1>{{ counterStore.count }}</h1>
  <h1>{{ counterStore.msg }}</h1>
  <son-1></son-1>
  <son-2></son-2>
</template>


<style scoped></style>