vue笔记三(组件)

十.组件

1.组件中的data为函数

2.props: 父组件向子组件传递数据

子组件:
Child.vue

<template>

<span>{{ myMsg }}</span>

</template>

<script>

export default {

  props: ['myMsg'],

  data () {

    return { }

  }

}

</script>

父组件:

<template>

  <div id="app">

    <child :my-msg="msg"></child>

  </div>

</template>

<script>

import Child from '@/components/Child'

export default {

  name: 'app',

  components: {Child},

  data () {

    return {

      msg: 'ok'

    }

  }

}

</script>

3.字面量语法和动态语法:

<!-- 传递了一个字符串 "1" -->

<comp some-prop="1"></comp>

如果你想要传递的是一个数字,你应该这么做

<!-- 传递了一个字符串 "1" -->

<comp :some-prop="1"></comp>

4.prop验证:

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 可以是下面原生构造器：

String

Number

Boolean

Function

Object

Array

Symbol

5.非 prop 特性
所谓非 prop 特性，就是它可以直接传入组件，而不需要定义相应的 prop。如class,style等

6.子组件跟父组件的通信:
父组件使用 $on(eventName) 监听事件
子组件使用 $emit(eventName) 来触发事件

示例:

子组件:

<template>

<button @click="onClick">单击</button>

</template>

<script>

export default {

  methods: {

    onClick () {

      this.$emit('increment')

    }

  }

}

</script>

父组件:

<template>

  <div id="app">

    <span>{{ data }}</span>

    <child v-on:increment="inCrementTotal"></child>

  </div>

</template>

<script>

import Child from '@/components/Child'

export default {

  name: 'app',

  components: {Child},

  data () {

    return {

      data: 0

    }

  },

  methods: {

    inCrementTotal () {

      this.data ++

    }

  }

}

</script>

7.绑定原生事件:

<my-component v-on:click.native="doTheThing"></my-component>

ps:这将触发my-component组件的click事件

8.修饰符 .sync
.sync双向绑定,从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。

示例:

子组件:

<template>

<button @click="onClick">单击</button>

</template>

<script>

export default {

  data () {

    return {foo: 1}

  },

  methods: {

    onClick () {

      this.$emit('update:foo', 10)

    }

  }

}

</script>

父组件:

<template>

  <div id="app">

    <span>{{ data }}</span>

    <child :foo.sync="data"></child>

  </div>

</template>

<script>

import Child from '@/components/Child'

export default {

  name: 'app',

  components: {Child},

  data () {

    return {

      data: 0

    }

  }

}

</script>

9.自定义表单事件:

<input v-model="something">

相当于:

<input

  v-bind:value="something"

  v-on:input="something = $event.target.value">

10.slot

子组件使用父组件传递过来的内容:

子组件:

<div>

  <h2>我是子组件的标题</h2>

  <slot>

    只有在没有要分发的内容时才会显示。

  </slot>

</div>

父组件:

<div>

  <h1>我是父组件的标题</h1>

  <my-component>

    <p>这是一些初始内容</p>

    <p>这是更多的初始内容</p>

  </my-component>

</div>

最终渲染:

<div>

  <h1>我是父组件的标题</h1>

  <div>

    <h2>我是子组件的标题</h2>

    <p>这是一些初始内容</p>

    <p>这是更多的初始内容</p>

  </div>

</div>

11.命名solt

子组件:

<div class="container">

  <header>

    <slot name="header"></slot>

  </header>

  <main>

    <slot></slot>

  </main>

  <footer>

    <slot name="footer"></slot>

  </footer>

</div>

父组件:

<app-layout>

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

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

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

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

</app-layout>

最终渲染:

<div class="container">

  <header>

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

  </header>

  <main>

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

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

  </main>

  <footer>

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

  </footer>

</div>

12.作用域solt

子组件:

<div class="child">

  <slot text="hello from child"></slot>

</div>

父组件:

<div class="parent">

  <child>

    <template scope="props">

      <span>hello from parent</span>

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

    </template>

  </child>

</div>

最终结果:

<div class="parent">

  <div class="child">

    <span>hello from parent</span>

    <span>hello from child</span>

  </div>

</div>

13.作用域solt列表组件

子组件:

<ul>

  <slot name="item"

    v-for="item in items"

    :text="item.text">

    <!-- 这里写入备用内容 -->

  </slot>

</ul>

父组件:

<my-awesome-list :items="items">

  <!-- 作用域插槽也可以是具名的 -->

  <template slot="item" scope="props">

    <li class="my-fancy-item">{{ props.text }}</li>

  </template>

</my-awesome-list>

14.动态组件:
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换

var vm = new Vue({

  el: '#example',

  data: {

    currentView: 'home'

  },

  components: {

    home: { /* ... */ },

    posts: { /* ... */ },

    archive: { /* ... */ }

  }

})

<component v-bind:is="currentView">

  <!-- 组件在 vm.currentview 变化时改变！ -->

</component>

也可以直接绑定到对象上:

var Home = {

  template: '<p>Welcome home!</p>'

}

var vm = new Vue({

  el: '#example',

  data: {

    currentView: Home

  }

})

15.keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数

<keep-alive>

  <component :is="currentView">

    <!-- 非活动组件将被缓存！ -->

  </component>

</keep-alive>

16.子组件索引ref

<div id="parent">

  <user-profile ref="profile"></user-profile>

</div>

使用:

var parent = new Vue({ el: '#parent' })

// 访问子组件

var child = parent.$refs.profile

17.异步组件
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单，Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：

Vue.component('async-example', function (resolve, reject) {

  setTimeout(function () {

    // Pass the component definition to the resolve callback

    resolve({

      template: '<div>I am async!</div>'

    })

  }, 1000)

})

工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。

18.命名约定
当注册组件 (或者 props) 时，可以使用 kebab-case，camelCase，或 PascalCase;在html中应当使用kebab-case

19.内联模板
如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板更灵活。

<my-component inline-template>

  <div>

    <p>These are compiled as the component's own template.</p>

    <p>Not parent's transclusion content.</p>

  </div>

</my-component>

20.对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：

Vue.component('terms-of-service', {

  template: '\

    <div v-once>\

      <h1>Terms of Service</h1>\

      ... a lot of static content ...\

    </div>\

  '

})

巴特西

vue笔记三(组件)

十.组件

最新文章

热门文章