3.Vue组件(2018.01.11)

最新推荐文章于 2025-09-07 14:13:11 发布

原创最新推荐文章于 2025-09-07 14:13:11 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

VUE2.0 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue.js中的组件概念，包括单文件组件结构、全局及局部注册方式、组件间通信、插槽使用、动态组件等内容。

1.Vue组件介绍：

Vue组件 (Component) 是 Vue.js 最强大的功能之一。项目都是由组件构建起来的，组件也可以重用。所有的 Vue 组件同时也都是 Vue 的实例。

2.Vue单文件组件包含三个部分：

template	视图部分，只能存在一个根元素。
script	逻辑部分，其中 data 必须是函数。
style	样式部分，建议使用 scoped 确保样式只在当前组件内生效。

模板如下：

<div>

</div>

</template>

</script>

</style>

3.全局注册组件（不常用）：

1). 在 main.js 里全局注册组件：

// 注册

Vue.component('my-component', {

})

2). 在App.vue或者其它组件里面使用，例如在Hello.vue里使用：

<div>

<my-component></my-component>

</div>

</template>

</script>

</style>

结果：

4.局部注册组件（常用）：

全局注册组件会让程序可读性降低，我们可以通过某个 Vue 组件的实例选项 components 注册仅在其作用域中可用的组件(对 Parent 组件而言 Child 组件是其局部组件，对 App 而言 Parent 组件也是其局部组件)：

1). 在 Child.vue 里面：

<div>

<p>{{ message }}</p>

</div>

</template>

export default {

name:"child",

data(){

return {

message: 'Hello Vue!'

}

</script>

</style>

2). 在 Parent.vue 里面：

<div>

</div>

</template>

import Child from './Child'

export default {

name:"parent",

data(){

return {

}

components: {

Child

}

</script>

</style>

3).在 App.vue 里面使用：

</div>

</template>

import MyHelloWorld from './components/HelloWorld'

import Hello from './components/Hello'

import Parent from './components/Parent'

export default {

components: {

MyHelloWorld,

Hello,

Parent

}

</script>

<style>

</style>

注：组件文件的名称不重要，在引入组件文件的时候其别名很重要，在components里面和在使用组件时都是使用该别名，参看上面的MyHelloWorld。不过建议组件名称跟组件文件名称相同。

5.组件里面的 data 必须是函数：

如果data不是一个函数，那么所有使用该组件的实例将共享同一个data数据对象，如果data里面的数据改变，有可能引起其他组件数据也同时改变。所以为了消除这种影响，规定data必须是一个函数。

案例：

<div>

<p>{{ message }}</p>

</div>

</template>

export default {

name:"child",

data(){

return {

message: 'Hello Vue!'

}

</script>

</style>

6.父子级组件之间的交互(通信)：

组件实例的作用域是孤立的，为了解耦，组件之间不能直接进行数据的传递。在 Vue 中，父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。

1).父组件向子组件传递数据：props

①.案例：

a.在 Parent.vue 里面：

<div>

</div>

</template>

import Child from './Child'

export default {

name:"parent",

data(){

return {

todo: {

text: 'Learn Vue',

isComplete: false

}

components: {

Child

}

</script>

</style>

b.在 Child.vue 里面：

<div>

<p>{{ staticMsg }}</p>

<p>{{ myMessage }}</p>

</div>

</template>

export default {

name:"child",

props: ['staticMsg','myMessage'], //父组件上面的参数必须跟这里一致

data(){

return {

}

</script>

</style>

注：Vue支持父组件将一个整体对象通过 props 传递给子组件。上面传递的 todo 即可说明。

②.不应该也不要在子组件内部直接改变 props 里面的值，如果想要改变，请使用下面方法：

a.方法一：定义一个局部变量，并用 props 的值初始化它：

export default {

name:"child",

props: ['initialCounter'],

data: function () {

return {

counter: this.initialCounter //在子组件里面可以改变counter值，但是不要改变initialCounter的值

}

</script>

b.方法二：定义一个计算属性，处理 props 的值并返回：

export default {

name:"child",

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase() //只要size本身值不改变即可

}

</script>

注：对象或数组是引用类型，如果 props 是一个对象或数组，在子组件内部改变它会影响父组件的状态。这就是我们不应该在子组件里面改变父组件传过来值的原因。

③. 数据传递类型限制与验证（重要）：

可以为组件的 props 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。要指定验证规则，需要用对象的形式来定义 props，而不能用字符串数组：

props: {

// 必须是数字 (`null` 指允许任何类型)

propA: Number,

// 可能是字符串或者是数字

propB: [String, Number],

// 必传且是字符串

propC: {

type: String,

required: true

// 数值且有默认值

propD: {

type: Number,

default: 100

// 数组/对象的默认值应当由一个工厂函数返回

propE: {

type: Object,

default: function () {

return { message: 'hello' }

}

// 自定义验证函数

propF: {

validator: function (value) {

return value > 10

}

type 可以是下面原生构造器：

type验证类型	说明
String	字符串
Number	数字
Boolean	布尔
Function	函数
Object	对象
Array	数组
Symbol	符号
自定义构造器函数	使用 instanceof 检测

2).子组件向父组件传递数据：emit事件

①.案例：

a.在 Child.vue 里面：

<div>

<button v-on:click="incrementCounter">{{ counter }}</button>

</div>

</template>

export default {

name:"child",

data(){

return {

counter: 0

}

methods: {

incrementCounter: function () {

this.counter += 1

this.$emit('increment') //父组件在使用子组件时必须监听 increment 事件

}

</script>

</style>

b.在 Parent.vue 里面：

<div>

<p>{{ total }}</p>

</div>

</template>

import Child from './Child'

export default {

name:"parent",

data(){

return {

total: 0

}

methods: {

incrementTotal: function () {

this.total += 1

}

components: {

Child

}

</script>

</style>

②.给组件绑定原生事件：

③.使用自定义事件的表单输入组件:

a.在 Child.vue 里面：

<div>

</div>

</template>

export default {

name:"child",

props: ['value'],

methods: {

updateValue: function (value) {

if(value.indexOf('$') === -1){

value = "$" + value;

}

this.$emit('input', value)

}

</script>

</style>

b.在 Parent.vue 里面：

<div>

<p>{{ price }}</p>

</div>

</template>

import Child from './Child'

export default {

name:"parent",

data(){

return {

price: 0

}

components: {

Child

}

</script>

</style>

3).非父子组件的通信:

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

①.新建一个空的 Vue 实例作为事件总线，在bus.js 文件中，内容如下：

import Vue from 'vue'

export default new Vue;

②.在组件 A.vue 里面触发事件:

<div>

<button v-on:click="incrementCounter">{{ counter }}</button>

</div>

</template>

import bus from './bus'

export default {

name:"component_a",

data(){

return {

counter: 0

}

methods: {

incrementCounter: function () {

this.counter += 1

bus.$emit('busincrement', this.counter) //其他组件如果想跟A通信，必须监听busincrement事件

}

</script>

</style>

③.在组件 B.vue 中监听事件：

<div>

<p>{{ counter }}</p>

</div>

</template>

import bus from './bus'

export default {

name:"component_b",

data(){

return {

counter: 0

}

mounted() {

bus.$on('busincrement',function (value) {

this.counter = value

}.bind(this))

}

</script>

</style>

注：B组件主动监听A组件，需要将事件写到mounted()里面，这样当A组件里面的事件触发，B组件就能知道。

④.在 App.vue 里面调用两个组件：

<B/>

<A/>

</div>

</template>

import A from './components/A'

import B from './components/B'

export default {

components: {

}

</script>

<style>

</style>

7.插槽：

所谓插槽就是在父组件里面先占一个位置，如果子组件有插口，则将子组件插口里面的内容放到父组件的插槽里面；如果子组件没有插口，则使用父组件备用（默认）的内容。最初在 <slot> 标签中的任何内容都被视为备用（默认）内容。备用（默认）内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用（默认）内容。

1).单个插槽：

①. 在子组件 Child.vue 模板里面：

<div>
    <h2>我是子组件的标题</h2>
    <slot>
     只有在没有要分发的内容时才会显示。
    </slot>
</div>

②. 在父组件 Parent.vue 模板里面：

<div>
    <h1>我是父组件的标题</h1>
    <Child>
       <p>这是一些初始内容</p>
       <p>这是更多的初始内容</p>
    </Child>
</div>

③. 渲染结果：

<div>
     <h1>我是父组件的标题</h1>
     <div>
            <h2>我是子组件的标题</h2>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
     </div>
</div>

2).具名插槽：

<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

①. 在子组件 app-layout 模板中：

</header>

<main>

</main>

</footer>

</div>

②.父组件模板：

<app-layout>

<h1 slot="header">这里可能是一个页面标题</h1>

<p>主要内容的一个段落。</p>

<p>另一个主要段落。</p>

<p slot="footer">这里有一些联系信息</p>

</app-layout>

③.渲染结果为：

<h1>这里可能是一个页面标题</h1>

</header>

<main>

<p>主要内容的一个段落。</p>

<p>另一个主要段落。</p>

</main>

<p>这里有一些联系信息</p>

</footer>

</div>

3).作用域插槽：数据是子组件传给父组件

①. 在子组件 child 中，只需将数据传递到插槽，就像你将 props 传递给组件一样：

<div>

</div>

②. 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 props 对象：

<child>

<span>hello from parent</span>

<span>{{ props.text }}</span>

</template>

</child>

</div>

③. 如果我们渲染上述模板，得到的输出会是：

<span>hello from parent</span>

<span>hello from child</span>

</div>

注意：在2.5.0之前，必须使用到template身上。

8.动态组件：

1).动态组件案例：

①.分别创建 Home.vue，Posts.vue，Archive.vue 内容如下（适当修改 msg 内容和 name 名称）：

<div>

</div>

</template>

export default {

name:"home",

data(){

return {

msg: "我是home组件"

}

</script>

</style>

②.在 App.vue 里面使用三个组件：

</component>

</div>

</template>

import Home from './components/Home'

import Posts from './components/Posts'

import Archive from './components/Archive'

export default {

data(){

return {

currentView: 'Home'

}

methods:{

changeView : function(){

if(this.currentView == 'Home'){

this.currentView ='Posts'

}else if(this.currentView == 'Posts'){

this.currentView ='Archive'

}else{

this.currentView ='Home'

}

components: {

Home,

Posts,

API	作用
props	允许外部环境传递数据给组件，即父组件传递给子组件
事件	允许从组件内触发外部环境的副作用，即子组件传递给父组件
插槽	允许外部环境将额外的内容组合在组件中，即父组件传递给子组件