Vue.js组件

分手后的思念是犯贱 2022-05-10 11:50 238阅读 0赞

组件可以扩展HTML元素，封装可重用代码。几乎任意类型的应用的界面都可以抽象为一个组件树。

1：全局组件。

指的是在全局定义的组件，注册的语法格式为：Vue.component(tagName,options) 调用时，直接在挂载点下使用<tagName></tagName>即可。

所谓全局，就是将可以在各个挂载点下可用。例：

Vue.component("runoob",\{template:'<h1>自定义的组件</h1>'\});

new Vue(\{

el:'\#app'

\});

new Vue(\{

el:'\#app2'

\});

</script>

2：局部组件

与全局组件对应，局部组件只能在一个挂载点使用，即局部组件所在的根实例中可用。

var lacal = \{

template:'<h1>自定义的组件</h1>'

new Vue(\{

el:'\#app',

components\{

'runoob': local

\});

</script>

3：Prop

prop是父组件用来传递数据的自定义属性。

可以简单理解为，组件在配置选项options中定义props属性，props为一个字符串数组，每一个字符串都可以作为组件的一个属性。

父组件该属性中指定的值（一般都是根实例中data中的属性），等同于props属性的数组中对应的值。所以可以在子组件中进行绑定、\{ \{\}\}取值等操作。

简单理解为：父组件需要通过props把数据传递给子组件，子组件可以显示的调用其中的prop。

这样我们在template属性对应的子组件中就可以使用这些属性。例：

</div>

Vue.component('child',\{

props:\['message','message2'\],

template:'<span>\{ \{message\}\}'+' '+'\{ \{ message2 \}\}</span>'

\});

new Vue(\{

el:'\#app'

\});

</script>

这里需要指出，props数组中的值可以理解为是一个实例属性，完全可以使用this.message。这里的this指的是对应的根实例。

4：动态Prop

基本用法同Prop类似，只是不在组件中直接写属性，而是用v-bind:message进行动态绑定。例：

<br/>

</div>

Vue.component('child',\{

props:\['message'\],

template:'<input v-model="message"/>'

\});

new Vue(\{

el:'\#app',

data:\{

parentMsg: '默认值'

\});

</script>

值得注意的是，props中的值，即使被双向绑定，但是只有单向的作用，即改变子组件的值，不影响父组件。

注意，prop中属性的作用范围只在父组件内，超出就会出错。

一个循环小例子加深理解：

<ol>

<todo-item v-for="site in sites" v-bind:item="site"></todo>

</ol>

</div>

Vue.component('todo-item',\{

props:\['item'\],

template:'<li>\{ \{item.name\}\}</li>'

\});

new Vue(\{

el:'\#app',

data:\{

sites:\[\{name:'aaa'\},\{name:'bbb'\},\{name:'ccc'\}\]

\});

</script>

5：Prop验证

组件可以为pops指定验证请求。这时props的值不是数组，而是对象。暂略。

6：自定义事件。

用来将子组件的数据传递回父组件。具体使用暂略。

番外篇：

看一个组件的示例：

Vue.component('button-counter',\{

data:funtion()\{

return \{ count:0 \}

\},

template :'<button v-on:click="count++">you click me \{ \{count\}\} times.</button>

\})

需要知道：组件是可复用的Vue实例，且带有一个名字。这里<button-counter>就是这个组件的名字。在new Vue(\{\})创建的根实例中，可以把组件当作自定义的元素来使用。

作为Vue的实例，因此组件可以接受与new Vue(\{\})相同的参数。比如data、computed、watch、methods、template以及生命周期钩子等等。但是，根实例特有的属性，如el，组件是不可用的。

组件可以被任意次的复用，每次调用都创建一个新的实例。

注意：组件的data必须是一个函数。而不是像根实例那样直接提供一个对象。目的是，可以在函数中维护一个被返回对象的独立的拷贝。此例中返回的是\{count:0\}对象。因此在复用的组件中，不会相互影响。这一点有一些模糊，先牢记。

Vue.js组件

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vscode前端常用插件整理（vuejs）

相关 Vuejs组件化开发

相关【Vuejs】1025- Vue 组件通信的 8 种方式

相关 Vuejs——（８）Vuejs组件的定义

相关滴滴开源基于金融场景的Vuejs组件库Mand Mobile

相关 Vuejs 插件开发

相关 vuejs组件通信的eventHub(巴士）

相关 vue组件

相关 vuejs组件通信精髓归纳

相关 Vuejs