Vue.js
  • [Vue.js]Vue.js 教程
  • [Vue.js]Vue.js 安装
  • [Vue.js]Vue.js 目录结构
  • [Vue.js]Vue.js 模板语法
  • [Vue.js]Vue.js 条件与循环
  • [Vue.js]Vue.js 循环语句
  • [Vue.js]Vue.js 计算属性
  • [Vue.js]Vue.js 样式绑定
  • [Vue.js]Vue.js 事件处理器
  • [Vue.js]Vue.js 表单
  • [Vue.js]Vue.js 组件
  • [Vue.js]Vue.js 自定义指令
  • [Vue.js]Vue.js 路由
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> javaScript >> Vue.js >> Vue.js 组件
    Vue.js 组件
    更新日期: 2017年07月20日 来源: 本站原创 作者: 佚名 阅读:
    上一篇Vue.js 表单 下一篇:Vue.js 自定义指令

    vue.js 组件

    组件(Component)是 Vue.js 最强大的功能之一。

    组件可以扩展 html 元素,封装可重用的代码。

    组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

    Vue.js 组件

    注册一个全局组件语法格式如下:

    Vue.component(tagName, options)

    tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

    <tagName></tagName>

    全局组件

    所有实例都能用全局组件。

    全局组件实例

    注册一个简单的全局组件 sssoob,并使用它:

    <div id="app"> <sssoob></sssoob> </div>
    <script> // 注册 Vue.component('sssoob', { template: '<h1>自定义组件!</h1>' })
    // 创建根实例
    new Vue({ el: '#app' })

    </script>

     

    局部组件

    我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:

    局部组件实例

    注册一个简单的局部组件 sssoob,并使用它:

    <div id="app"> <sssoob></sssoob> </div>
    <script> var Child = { template: '<h1>自定义组件!</h1>' }
    // 创建根实例
    new Vue({
    el: '#app',
    components: { //
    <sssoob> 将只在父模板可用 'sssoob': Child } }) </script>

     

    Prop

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

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

    Prop 实例

    <div id="app">
    <child message="hello!"></child>
    </div>
    <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app' }) </script>

     

    动态 Prop

    类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:

    Prop 实例

    <div id="app">
    <div>
    <input v-model="parentMsg">
    <br>
    <child v-bind:message="parentMsg"></child>
    </div>
    </div>
    <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' })
    // 创建根实例
    new Vue({ el: '#app', data: { parentMsg: '父组件内容' } })
    </script>

     

    以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中:

    Prop 实例

    <div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
    </ol>
    </div>
    <script> Vue.component('todo-item', {
    props: ['todo'],
    template: '
    <li>{{ todo.text }}</li>' })
    new Vue({
    el: '#app',
    data: { sites: [ { text: 'sssoob' }, { text: 'Google' }, { text: 'Taobao' } ] }
    })

    </script>

     

    注意: prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。

    Prop 验证

    组件可以为 props 指定验证要求。

    prop 是一个对象而不是字符串数组时,它包含验证要求:

    Vue.component('example', {
      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

    type 也可以是一个自定义构造器,使用 instanceof 检测。


    自定义事件

    父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!

    我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

    • 使用 $on(eventName) 监听事件
    • 使用 $emit(eventName) 触发事件

    另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

    以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

    实例

    <div id="app">
    <div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
    </div>
    <script> Vue.component('button-counter', {
    template: '
    <button v-on:click="increment">{{ counter }}</button>',
    data: function () { return { counter: 0 } },
    methods: { increment: function () { this.counter += 1 this.$emit('increment') } }, })
    new Vue({
    el: '#counter-event-example',
    data: { total: 0 },
    methods: { incrementTotal: function () { this.total += 1 }
    }
    })

    </script>

     

    如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如:

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

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇Vue.js 表单 下一篇:Vue.js 自定义指令
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918