Los componentes que no son de un solo archivo se refieren a: un archivo contiene múltiples componentes.
Tres pasos para usar componentes en Vue: 1. Crear componentes, 2. Registrar componentes, 3. Usar componentes.
Proceso de uso de componentes [Paso 1: crear un componente]
Cree componentes utilizando el método Vue.extend():
// 第一步：创建 frameHead 组件
const FrameHead = Vue.extend({
name: "fhead",
template:`
<div>
<strong>{
{title}}</strong>
<span>{
{username}}</span>
</div>
`,
data(){
return {
title: "商城管理系统",
username: "张三"
}
}
})
// 第一步：创建 frameNav 组件【简写】
// const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象;
const FrameNav = {
template:`
<ul>
<li v-for="(item,index) in list" :key="index" @click="isHref(item)">
{
{item}}
</li>
</ul>
`,
data(){
return {
list: ["首页","用户管理","商品管理","轮播图管理"]
}
},
methods:{
isHref(name){
alert(`跳转至${name}`);
}
}
}Nota : el contenido de Vue.extend() es básicamente el mismo que el de new Vue(), y también puede escribir datos, métodos y propiedades calculadas. Su diferencia es:
- No puede escribir el en un componente, porque todos los componentes deben ser administrados por una instancia de Vue, y la instancia de Vue determina qué contenedor servir.
- Los datos del componente deben escribirse como una función, porque evita el problema de la referencia de datos cuando el componente se usa varias veces (el problema de varios componentes que comparten un dato).
- El componente necesita usar la plantilla para configurar el contenido estructural y debe haber un elemento raíz más grande en la plantilla para envolver todo el contenido.
- Puede usar el nombre para configurar un alias en el componente, que a menudo se usa para el filtrado de caché de componentes.
Abreviatura del componente: nombre del componente const = Vue.extend (objeto de configuración) se puede abreviar como: nombre del componente const = objeto de configuración
Proceso de uso de componentes [Paso 1: Registrar componente]
Registro parcial: configure la opción de componentes al usar el nuevo Vue
const vm = new Vue({
el: "#APP",
// 第二步：注册组件（局部注册）
components:{
// FrameHead: FrameHead, 名称相同时可以简写
FrameHead,
FrameNav
},
data(){
return {
content: "网页内容"
}
}
});Nota : El nombre del componente se especifica al registrar el componente. Para varias palabras, puede nombrarlo MyCode con un camello grande o my-code con un guión. Además, al nombrar, trate de evitar nombres de elementos existentes en HTML, por ejemplo: h2 y H2 no son aceptables.
Proceso de uso de componentes [Paso 3: Usar componentes]
<div id="APP">
<!-- 第三步：使用组件 -->
<frame-head></frame-head>
<hr/>
<!-- 第三步：使用组件 -->
<frame-nav></frame-nav>
<hr/>
<p>{
{content}}</p>
</div>Nota : Usar componentes es lo mismo que usar etiquetas. Si hay varias palabras, debe usar un guión para nombrar my-code, y también puede usar una joroba grande para nombrar MyCode en scaffolding. Además, también se puede escribir en un formato de etiqueta única en scaffolding, pero cuando no se usa scaffolding, escribir en una etiqueta única hará que los componentes posteriores no se reproduzcan.
Proceso de uso de componentes [código completo]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue2非单文件组件使用流程</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="APP">
<!-- 第三步：使用组件 -->
<frame-head></frame-head>
<hr />
<!-- 第三步：使用组件 -->
<frame-nav></frame-nav>
<hr />
<p>{
{content}}</p>
</div>
<script>
// 第一步：创建 frameHead 组件
const FrameHead = Vue.extend({
name: "fhead", // 定义别名
template: `
<div>
<strong>{
{title}}</strong>
<span>{
{username}}</span>
</div>
`,
data() {
return {
title: "商城管理系统",
username: "张三"
}
}
})
// 第一步：创建 frameNav 组件【简写】
// const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象;
const FrameNav = {
template: `
<ul>
<li v-for="(item,index) in list" :key="index" @click="isHref(item)">
{
{item}}
</li>
</ul>
`,
data() {
return {
list: ["首页", "用户管理", "商品管理", "轮播图管理"]
}
},
methods: {
isHref(name) {
alert(`跳转至${name}`);
}
}
}
const vm = new Vue({
el: "#APP",
// 第二步：注册组件（局部注册）
components: {
// FrameHead: FrameHead, 名称相同时可以简写
FrameHead,
FrameNav
},
data() {
return {
content: "网页内容"
}
}
});
</script>
</body>
</html>
Nota : la ventaja del desarrollo de componentes es que cada componente solo es responsable de una función, y cada página puede usar este componente, lo que puede mejorar la reutilización del código. Además, el nombre definido por el atributo de nombre del componente se muestra en la herramienta del desarrollador.
Autor original: Wu Xiaotang
Hora de creación: 2023.5.12