Vue素子

VueとReactは、Webページの作成時にコンポーネントベースの設計を行うためのフレームワーク/ライブラリです.したがって,ウェブページの設計概念はほぼ同じと考えられる.ただし、基本的な実施形態では若干の相違がある.

グローバル登録
main.jsでグローバル構成部品を宣言する

//main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//GlobalComponent는 별도의 파일로 만들어야 함
import GlobalComponent from './components/global-component'
Vue.component(GlobalComponent.name, GlobalComponent)

new Vue({
render: h => h(App),
}).$mount('#app')

//app.vue
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import GlobalComponent from './components/global-component'

Vue.component(GlobalComponent.name, GlobalComponent)

new Vue({
  render: h => h(App),
}).$mount('#app')

地域登録
必要なページで構成部品を宣言します.

//app.vue
//LocalComponent는 별도의 파일로 만들어야 함
<template>
  <div id="app">
    <global-component></global-component>
    <local-component></local-component>
  </div>
</template>

<script>
  import LocalComponent from './components/local-component'

  export default {
    name: 'app',
    components: { "local-component" : LocalComponent }
  }
</script>

構成部品を

import

にインポートする.
登録

コンポーネント

テンプレート

を使用

注意事項?
-構成部品宣言時に、2つ以上の単語に名前を付けたkebab-caseというガイドラインがあります.
-そうしなくてもいい

反応器は

である

//컴포넌트
export default function Component () {
	return (
		...
	)
}

//컴포넌트를 불러오는 곳
import Component from "./Comonent"

...

return (
	<>
		<Component />
	</>
)

...

構成部品を作成してロードするプロセス自体には大きな違いはありませんが、Vueではコンポーネントにロードして登録し、使用するプロセスを追加するだけで、Reactでの実装はより直感的になるようです.
参照リンク:https://kdydesign.github.io/2019/04/27/vue-component/