锐英源精品原创，禁止全文或局部转载，禁止任何形式的非法使用，侵权必究

VUE组件优点和动态组件属性

VUE把网页组件化是最近低代码开发拖控件编写网页的基础，同时拖控件也极其依赖动态组件属性机制，大家在学VUE时，要学形式也要学思想，能够结合不同环境进行理解。

 

在我们开发的过程中，如果我们将一个页面中所有的逻辑处理都放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
但如果，我们将页面拆分成一个个小的模快，每个功能完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易，这就是我们组件的思想。
如下，是我们vue关于组件的一个示例
// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
<button @click="count++">
You clicked me {{ count }} times.
</button>`
})

这样我们就定义了一个button-counter组件，该组件定义了一个按钮，每次我们点击都会使count加1，现在我们来使用这个组件
<div id="components-demo">
<button-counter></button-counter>
</div>

app.mount('#components-demo')

点击7次后，显示效果如下

这样就是一个简单的组件使用效果，但在这个实现中我们的组件感觉就是一个封装的效果，自顾自的在处理自己的逻辑，想一想我们能不能传递给这个组件一些数据呢，实际当然是可以的，我们看下面这个案例

const app = Vue.createApp({}) 

app.component('blog-post', { 

  props: ['title'], 

  template: `<h4>{{ title }}</h4>` 

}) 

我们在组件中添加了一个props选项，这个选项是干什么的呢，我们再来调用一次这个组件

app.mount('#blog-post-demo') 

<div id="blog-post-demo" class="demo"> 

  <blog-post title="My journey with Vue"></blog-post> 

  <blog-post title="Blogging with Vue"></blog-post> 

  <blog-post title="Why Vue is so fun"></blog-post> 

</div>

这次不仅调用了组件，我们还给组件组件的属性赋值，这属性是从哪来的呢？结合上面我们对组件的定义，不难看出，props这个选项所定义的值，就相当与给我们组件定义了一个属性，组件内部对这个属性进行了调用，然后我们使用这个组件的时候对这个属性进行赋值，就实现了我们向组件内部传递数据的效果