const activeClientChange = reactive<{client: null | INewClient}>({
client: null
})<template>
<input :value="props.modelValue"
@input="$event => emit('update:modelValue', $event.target.value)"
/>
</template>
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script><template>
<new-component v-model="refInput" />
</template>
<script setup>
import { ref } from 'vue'
import NewComponent from './new-component'
const refInput = ref('')<template>
<child-component v-bind="globalObject"/>
</template>
<script setup>
// import { Alien, DevTools, Test, ChildComponent } from 'where?'
import { reactive } from 'vue'
const globalObject = reactive({prop1, prop2, prop3})
</script>import beacon from './assets/beacon.svg'
import cloud from './assets/cloud.svg'
import sun from './assets/sun.svg'
export const images = { sun, beacon, cloud }const props = withDefaults(defineProps<{
datalist?: datalist,
id?: strnum,
idKey?: strnum,
valueKey?: strnum,
placeholder?: string,
}>(), {
datalist: () => [] as datalist,
idKey: 'id',
valueKey: 'value',
placeholder: '',
});npm create vue@latest
child.value.publicMethod()export default {
expose: ['publicData', 'publicMethod'],
data() {
return {
publicData: 'foo',
privateData: 'bar'
}
},
methods: {
publicMethod() {
/* ... */
},
privateMethod() {
/* ... */
}
}
}<script>
import Child from './Child.vue'
export default {
components: {
Child
},
mounted() {
}
}
</script>
<template>
<Child ref="child" />
</template><div>
<slot :text="greetingMessage" :count="1"></slot>
</div><MyComponent v-slot="slotProps">
{{ slotProps.text }} {{ slotProps.count }}
</MyComponent><template>
<div>
<v-child ref="refChild" />
<button @click="getDataFromChild">Call child function</button>
</div>
</template>
<script setup>
import VChild from './VChild.vue'
import { ref } from 'vue'
const refChild = ref()
function getDataFromChild() {
if (refChild.value) {
refChild.value.childFunction()
}
}
</script><template>
<div>{{ msgHello }}</div>
</template>
<script setup>
import { ref } from 'vue'
const msgHello = ref('Try to click on')
function childFunction() {
msgHello.value = 'childFunction called!'
}
defineExpose({childFunction})
</script><script setup>
import { computed } from 'vue'
const ifShow = computed(() => {
return (isShow) => isShow === 'some day'
})
</script>
<template>
<span v-show="ifShow('some day')">Hi!</span>
</template>export default {
data() {
return {}
},
computed: {
ifShow() {
return (isShow) => isShow === 'some day'
}
}
}getCurrentInstanceimport { getCurrentInstance } from 'vue'
export function useI18n() {
const instance = getCurrentInstance()
if (!instance) return (localeString: string) => localeString // вернем строку обратно
return instance.appContext.config.globalProperties.$t
}<script setup lang="ts">
import useI18n from '@/utils/useI18n'
const t = useI18n()
</script><span v-for="i in 20" :key="i" ref="spans">{{ i }}</span>const spans = ref()
onMounted(() => {
console.log(spans.value)
})expose, затем через ref ими пользоваться
<script setup>
onMounted(() => {
let canvas= document.getElementById("myCanvas")
let context = canvas?.getContext("2d")
canvas.onmousedown = function (){
canvas.onmousemove = function (event){
let x = event.offsetX
let y = event.offsetY
context.fillRect(x-5, y-5, 5, 5)
}
canvas.onmouseup = function (){
canvas.onmousemove = null
}
}
})
</script><canvas
@mousedown="canvasMouseDowned = true"
@mousemove="canvasMouseMove"
@mouseup="canvasMouseDowned = false"
class="signature"
width="900"
height="600"
/><script setup lang="ts">
const canvasMouseDowned = ref(false)
function canvasMouseMove(event: MouseEvent) {
if (!canvasMouseDowned.value) return
let x = event.offsetX
let y = event.offsetY
if (event.target) {
let context = (event.target as HTMLCanvasElement).getContext('2d')
context?.fillRect(x-5, y-5, 5, 5)
}
}export const useStoreUi = defineStore('ui', {...})
const stores = {
ui: useStoreUi
}
export default stores