mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-06 04:21:55 +00:00
docs: add Vue expose comp code samples and such
This commit is contained in:
Corbin Crutchley
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular Comp Ref Alert - Example #67 - FFG Fundamentals</title>
|
||||
<title>Angular Comp Ref Alert - Example #67b - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<parent-comp></parent-comp>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular Comp Ref Log - Example #67 - FFG Fundamentals</title>
|
||||
<title>Angular Comp Ref Log - Example #67a - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<parent-comp></parent-comp>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React Broken forwardRef - Example #67 - FFG Fundamentals</title>
|
||||
<title>React Broken forwardRef - Example #67a - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React Renamed Ref - Example #67 - FFG Fundamentals</title>
|
||||
<title>React Renamed Ref - Example #67b - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React useImperativeHandle - Example #67 - FFG Fundamentals</title>
|
||||
<title>React useImperativeHandle - Example #67d - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React useImperativeHandle Fn Use - Example #67 - FFG Fundamentals</title>
|
||||
<title>React useImperativeHandle Fn Use - Example #67e - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>React Working forwardRef - Example #67 - FFG Fundamentals</title>
|
||||
<title>React Working forwardRef - Example #67c - FFG Fundamentals</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -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?
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!-- Child.vue -->
|
||||
<script setup>
|
||||
const pi = 3.14;
|
||||
|
||||
function sayHi() {
|
||||
alert("Hello, world");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p>Hello, template</p>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,5 @@
|
||||
// main.js
|
||||
import { createApp } from "vue";
|
||||
import Parent from "./Parent.vue";
|
||||
|
||||
createApp(Parent).mount("#root");
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
});
|
||||
@@ -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?
|
||||
@@ -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
1099
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-comp-ref-log-67/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!-- Child.vue -->
|
||||
<script setup>
|
||||
const pi = 3.14;
|
||||
|
||||
function sayHi() {
|
||||
alert("Hello, world");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p>Hello, template</p>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,5 @@
|
||||
// main.js
|
||||
import { createApp } from "vue";
|
||||
import Parent from "./Parent.vue";
|
||||
|
||||
createApp(Parent).mount("#root");
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
});
|
||||
@@ -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?
|
||||
@@ -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
1099
content/blog/ffg-fundamentals-component-reference/ffg-fundamentals-vue-expose-comp-ref-67/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,5 @@
|
||||
// main.js
|
||||
import { createApp } from "vue";
|
||||
import Parent from "./Parent.vue";
|
||||
|
||||
createApp(Parent).mount("#root");
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
});
|
||||
Reference in New Issue
Block a user