LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-07 21:07:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add Vue expose comp code samples and such

Browse Source
This commit is contained in:
Corbin Crutchley
2024-01-15 20:43:46 -08:00
parent 750a786fbd
commit c93f3acb23
31 changed files with 3577 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-angular-comp-ref-alert-67/src/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>Angular Comp Ref Alert - Example #67 - FFG Fundamentals</title> <title>Angular Comp Ref Alert - Example #67b - FFG Fundamentals</title>
</head> </head>
<body> <body>
<parent-comp></parent-comp> <parent-comp></parent-comp>

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-angular-comp-ref-log-67/src/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>Angular Comp Ref Log - Example #67 - FFG Fundamentals</title> <title>Angular Comp Ref Log - Example #67a - FFG Fundamentals</title>
</head> </head>
<body> <body>
<parent-comp></parent-comp> <parent-comp></parent-comp>

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-broken-forward-ref-67/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>React Broken forwardRef - Example #67 - FFG Fundamentals</title> <title>React Broken forwardRef - Example #67a - FFG Fundamentals</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-renamed-ref-67/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>React Renamed Ref - Example #67 - FFG Fundamentals</title> <title>React Renamed Ref - Example #67b - FFG Fundamentals</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-67/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>React useImperativeHandle - Example #67 - FFG Fundamentals</title> <title>React useImperativeHandle - Example #67d - FFG Fundamentals</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-use-imperative-handle-fn-use-67/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>React useImperativeHandle Fn Use - Example #67 - FFG Fundamentals</title> <title>React useImperativeHandle Fn Use - Example #67e - FFG Fundamentals</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-react-working-forward-ref-67/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>React Working forwardRef - Example #67 - FFG Fundamentals</title> <title>React Working forwardRef - Example #67c - FFG Fundamentals</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Vue Broken Expose Comp Ref - Example #67b - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1099
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "@ffg-fundamentals/vue-broken-expose-comp-ref-67",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.4.9"
}
}

12
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/src/Child.vue Normal file
View File

@@ -0,0 +1,12 @@
<!-- Child.vue -->
<script setup>
const pi = 3.14;
function sayHi() {
alert("Hello, world");
}
</script>
<template>
<p>Hello, template</p>
</template>

15
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/src/Parent.vue Normal file
View File

@@ -0,0 +1,15 @@
<!-- Parent.vue -->
<script setup>
import { ref, onMounted } from "vue";
import Child from "./Child.vue";
const childComp = ref();
onMounted(() => {
alert(childComp.value.pi);
});
</script>
<template>
<Child ref="childComp" />
</template>

5
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/src/main.js Normal file
View File

@@ -0,0 +1,5 @@
// main.js
import { createApp } from "vue";
import Parent from "./Parent.vue";
createApp(Parent).mount("#root");

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-broken-expose-comp-ref-67/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Vue Comp Ref Log - Example #67a - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1099
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "@ffg-fundamentals/vue-comp-ref-log-67",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.4.9"
}
}

12
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/src/Child.vue Normal file
View File

@@ -0,0 +1,12 @@
<!-- Child.vue -->
<script setup>
const pi = 3.14;
function sayHi() {
alert("Hello, world");
}
</script>
<template>
<p>Hello, template</p>
</template>

15
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/src/Parent.vue Normal file
View File

@@ -0,0 +1,15 @@
<!-- Parent.vue -->
<script setup>
import { ref, onMounted } from "vue";
import Child from "./Child.vue";
const childComp = ref();
onMounted(() => {
console.log(childComp.value);
});
</script>
<template>
<Child ref="childComp" />
</template>

5
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/src/main.js Normal file
View File

@@ -0,0 +1,5 @@
// main.js
import { createApp } from "vue";
import Parent from "./Parent.vue";
createApp(Parent).mount("#root");

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});

24
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Vue Expose Comp Ref - Example #67c - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1099
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "@ffg-fundamentals/vue-expose-comp-ref-67",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.4.9"
}
}

17
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/src/Child.vue Normal file
View File

@@ -0,0 +1,17 @@
<!-- Child.vue -->
<script setup>
const pi = 3.14;
function sayHi() {
alert("Hello, world");
}
defineExpose({
pi,
sayHi,
});
</script>
<template>
<p>Hello, template</p>
</template>

16
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/src/Parent.vue Normal file
View File

@@ -0,0 +1,16 @@
<!-- Parent.vue -->
<script setup>
import { ref, onMounted } from "vue";
import Child from "./Child.vue";
const childComp = ref();
onMounted(() => {
alert(childComp.value.pi);
childComp.value.sayHi();
});
</script>
<template>
<Child ref="childComp" />
</template>

5
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/src/main.js Normal file
View File

@@ -0,0 +1,5 @@
// main.js
import { createApp } from "vue";
import Parent from "./Parent.vue";
createApp(Parent).mount("#root");

6
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});