滨州外贸网站建设,京东商城官网入口,制造网站开发,北京it外包公司排行榜文章目录 一、全局组件1.创建全局组件2.在main.js中注册全局组件3.使用全局组件 二、局部组件1.创建局部组件2.在另一个组件中注册、使用局部组件 三、Props1.定义一个子组件2.定义一个父组件3.效果 代码仓库#xff1a;跳转 本博客对应分支#xff1a;03
一、全局组件
Vue… 文章目录 一、全局组件1.创建全局组件2.在main.js中注册全局组件3.使用全局组件 二、局部组件1.创建局部组件2.在另一个组件中注册、使用局部组件 三、Props1.定义一个子组件2.定义一个父组件3.效果 代码仓库跳转 本博客对应分支03
一、全局组件
Vue 3 中的全局组件是在应用程序中全局注册的组件可以在任何地方使用而不需要在每个组件中都单独注册。
1.创建全局组件
在components目录下创建全局组件MyGlobalComponent.vue
!-- components/MyGlobalComponent.vue --
templatedivThis is my global component/div
/templatescript
export default {name: MyGlobalComponent
};
/script2.在main.js中注册全局组件
import { createApp } from vue;
import App from ./App.vue;const app createApp(App);// 注册全局组件
import MyGlobalComponent from ./components/MyGlobalComponent.vue;
app.component(MyGlobalComponent, MyGlobalComponent);app.mount(#app);3.使用全局组件
在App.vue中尝试使用我们定义和注册的全局组件
!-- App.vue --
templatediv idapp!-- 使用全局组件 --MyGlobalComponent /MyGlobalComponentHelloWorld //div
/templatescript
import HelloWorld from ./components/HelloWorld.vue;export default {name: App,components: {HelloWorld}
};
/script效果 二、局部组件
在 Vue 3 中局部组件是指在单个组件内部注册和使用的组件。这意味着局部组件只能在其父组件内部使用而无法在其他组件中直接使用。要在 Vue 3 中创建一个局部组件可以在父组件的 components 选项中注册它然后在父组件的模板中使用它。
1.创建局部组件
在components目录下创建局部组件MyLocalComponent.vue
!-- components/MyLocalComponent.vue --
templatedivh2这是局部组件/h2p我只能在父组件内部使用/p/div
/templatescript
export default {name: MyLocalComponent
};
/script
2.在另一个组件中注册、使用局部组件
!-- App.vue --
templatediv idapp!-- 使用全局组件 --MyGlobalComponent/MyGlobalComponent!-- 使用局部组件 --MyLocalComponent/MyLocalComponentHelloWorld //div
/templatescript
// 引入并注册局部组件
import HelloWorld from ./components/HelloWorld.vue;
import MyLocalComponent from ./components/MyLocalComponent.vue;export default {name: App,components: {HelloWorld,MyLocalComponent}
};
/script效果 三、Props
在 Vue 3 中props 是用于从父组件向子组件传递数据的机制。通过 props父组件可以向子组件传递数据子组件可以接收并使用这些数据。
1.定义一个子组件
在components目录下创建一个子组件ChildComponent.vue
我们定义了一个名为 message 的 prop并使用了 props 的验证功能。我们指定了它的类型为 String并且设置为必需的required: true。这意味着父组件在使用 ChildComponent 时必须传递一个名为 message 的字符串类型的数据。
!-- ChildComponent.vue --
templatedivh2子组件/h2p{{ message }}/p/div/templatescriptexport default {props: {message: {type: String,required: true}}};/script
2.定义一个父组件
在components目录下创建一个子组件ParentComponent.vue
在父组件中我们使用了 v-bind 或者简写的 : 语法将 parentMessage 数据传递给了 ChildComponent 的 message prop。这样parentMessage 的值就会被传递到 ChildComponent 中并在子组件中使用。
!-- ParentComponent.vue --
templatedivh1父组件/h1ChildComponent :messageparentMessage //div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},data() {return {parentMessage: 这是来自父组件的消息};}
};
/script
3.效果
为了便于在页面上展示我们在App.vue中注册ParentComponent为局部组件
!-- App.vue --
templatediv idapp!-- 使用全局组件 --MyGlobalComponent/MyGlobalComponent!-- 使用局部组件 --MyLocalComponent/MyLocalComponentHelloWorld /ParentComponent/ParentComponent/div
/templatescript
// 引入并注册局部组件
import HelloWorld from ./components/HelloWorld.vue;
import MyLocalComponent from ./components/MyLocalComponent.vue;
import ParentComponent from ./components/ParentComponent.vue;export default {name: App,components: {HelloWorld,MyLocalComponent,ParentComponent}
};
/script
效果
