VUE -组件简白的用法介绍和案例代码COPY

(采用vue3语法)

介绍流程：一个组件语法和使用介绍 -> 小案例 -> 相关概念知识补充 

大概内容就是：全部组件、局部组件、prop

组件语法和使用介绍

使用分两步：1.在vue中注册  2.在html中使用

1.注册一个全局组件语法格式如下：

const app = Vue.createApp({...})

app.component('component-name', {
  /* ... */
})

component-name 为组件名 /* ... */ 部分为组件内容

2.在html中使用
<自己写的组件名字> </自己写的组件名字>

也就是上面的：<component-name></component-name>

全局组件小案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 实例 - 组件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
 
// 创建一个Vue 应用
const app = Vue.createApp({

})
 
// 定义一个名为 button-counter 的新全局组件
app.component('runoob', {
    template: '<h1>自定义组件!</h1>'
})
 
app.mount('#app')

</script>
</body>
</html>

　　

概念知识补充：

你可以将组件进行任意次数的复用

上面全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。

局部组件

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件

 上面的字读完了看我这里，其实我也没怎么读懂，它大概的意思我猜是 创建一个Vue 应用时，有些组件不怎么需要，所以使用局部组件。

局部组件使用的语法如下：（和全局组件使用方法一致，只是在注册的地方做了改变）

1.注册一个局部组件语法格式：

const ComponentA = {
  /* 局部组件内容 */
}
const ComponentB = {
  /* ... */
}
const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

局部组件小案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <runoob-a></runoob-a>
</div>
<script>
 
var runoobA = {
  template: '<h1>自定义组件!</h1>'
}
 
const app = Vue.createApp({
  components: {
    'runoob-a': runoobA
  }
})
 
app.mount('#app')
</script>
</body>
</html>

　　

Prop

知识点：prop声明和使用、动态Prop、Prop验证

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

Prop小案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <site-name title="Google"></site-name>
  <site-name title="Runoob"></site-name>
 </div>
 
<script>
const app = Vue.createApp({})
 
app.component('site-name', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#app')
</script>
</body>
</html>

　　

 

 

动态 Prop

太复杂了还没学会，暂时用不到，先不学。

Prop 验证

稍微有那么点用，暂时用不到，先不学。

posted @ 2021-03-14 22:18  程序1088  阅读(73)  评论(0)    收藏  举报