vue.extend 局部注册 的应用2

请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用： new Vue({components: fuck})

最终还是要通过Vue.components注册才可以使用的。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>在Vue中注册组件</title>

</head>

<body>

<div id="app">

    <todo :todo-data="groceryList"></todo>

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue " type="text/javascript"></script>

<script>

/**

 * 请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。

 * 所以他不能直接在new Vue中这样使用： new Vue({components: fuck})

 * 最终还是要通过Vue.components注册才可以使用的。

 */

// 构建一个子组件

var todoItem = Vue.extend({

    template: ` <li> {{ text }} </li> `,

    props: {

        text: {

            type: String,

            default: ''

        }

    }

})

// 构建一个父组件

var todoWarp = Vue.extend({

    template: `

        <ul>

            <todo-item

                v-for="(item, index) in todoData"

                v-text="item.text"

            ></todo-item>

        </ul>

    `,

    props: {

      todoData: {

          type: Array,

          default: []

      }

    },

    // 局部注册子组件

    components: {

        todoItem: todoItem

    }

})

// 注册到全局

Vue.component('todo', todoWarp)

new Vue({

    el: '#app',

    data: {

        groceryList: [

            { id: 0, text: '蔬菜' },

            { id: 1, text: '奶酪' },

            { id: 2, text: '随便其它什么人吃的东西' }

        ]

    }

})

</script>

</html>

54、vue.extend 局部注册 的应用1

请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦

另外，无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象，如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象之外吧，如 new Vue({data: {}});

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>在Vue中注册组件</title>

</head>

<body>

<div id="todoItem"></div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>

<script>

// 局部注册组件

var todoItem = Vue.extend({

  data: function () {

        return {

            todoData: [

              { id: 0, text: '蔬菜' },

              { id: 1, text: '奶酪' },

              { id: 2, text: '随便其它什么人吃的东西' }

            ]

        }

  },

  template: `

        <ul>

            <li v-for='(d, i) in todoData' :key="i">

                {{ d.text }}

            </li>

        </ul>

  `

});

// 请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦

new todoItem({

  propsData: {

      todoData: [

          { id: 0, text: '蔬菜' },

          { id: 1, text: '奶酪' },

          { id: 2, text: '随便其它什么人吃的东西' }

      ]

  }

}).$mount('#todoItem')

</script>

</html>

vue extend 的基本使用的更多相关文章

  1. vue.mixin与vue.extend

    vue.mixin 全局注册一个混合,影响注册之后所有创建的每个 Vue 实例.谨慎使用全局混合对象,因为会影响到每个单独创建的 Vue 实例(包括第三方模板).大多数情况下,只应当应用于自定义选项, ...

  2. Vue.extend和Vue.component的联系与差异

    extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...

  3. VUE组件 之 Toast (Vue.extend 方式)

    一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component  方式实现的, ...

  4. Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改

    html <div id="app"> </div> <p><button onclick="destroy()"&g ...

  5. $mount方法是用来挂载我们的Vue.extend扩展的

    html <body> <div id="app"> <diy></diy> </div> </body> ...

  6. Vue.extend提供自定义组件的构造器

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

  7. Vue extend 学习

    <div id="box"> <aa></aaa> </div> <script> var Aaa = Vue.exte ...

  8. Vue vue.extend 和vue.component 两则之间的区别

    Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 ...

  9. vue 之 Vue.extend()

    Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象. data 选项是特例,需要注意 ...

随机推荐

  1. 转：解决tomcat服务器跨域问题

    原文地址: 解决tomcat服务器跨域请求问题 注:还未测试 在tomcat 的web.xml 配置文件中加入如下配置过滤器 (如web.xml中有多个filter时要把下面配置放在最前端) < ...

  2. Luogu4451 [国家集训队]整数的lqp拆分

    题目链接:洛谷 题目大意:求对于所有$n$的拆分$a_i$,使得$\sum_{i=1}^ma_i=n$,$\prod_{i=1}^mf_{a_i}$之和.其中$f_i$为斐波那契数列的第$i$项. 数 ...

  3. Spring中的事务操作

    事务的特性 原子性:强调事务的不可分割. 一致性:事务的执行的前后数据的完整性保持一致. 隔离性:一个事务执行的过程中,不应该受到其他事务的干扰. 持久性:事务一旦结束,数据就持久化到数据库. 如果不 ...

  4. 构造方法 this super

    1 构造方法 1.1 构造方法Constructor概述创建对象要明确属性值,此时需要用到构造方法,即对象创建时要执行的方法,用来给对象的属性进行初始化.在new对象时,知道其执行的构造方法是什么,就 ...

  5. int bool 字符串 列表 字典 集合

    1.int和bool 输出i的最大二进制位数inti = 1000 print(i.bit_length()) 2. str int bool list set dict  tuple 相互转换 pr ...

  6. Struts2重要知识点总结

    一.interceptor拦截器的使用 第一种情况(指定action使用该拦截器):struts.xml文件的配置: <interceptors> <interceptor name ...

  7. node获取windows pc 机器的标示

    var exec = require('child_process').exec; if(process.platform != "win32"){ //window throw ...

  8. MySQL Workbench在archlinux中出现 Could not store password: The name org.freedesktop.secrets was not provided by any .service files的错误

    MySQL Workbench在archlinux中出现 Could not store password: The name org.freedesktop.secrets was not prov ...

  9. java 知识点

    1. java泛型 避免编译错误 (ArrayList定义时候)    避免强制类型装换 2 多态的体现 实现多态主要有以下三种方式:1. 接口实现 2. 继承父类重写方法 3. 同一类中进行方法重载 ...

  10. 线段树 HDU-1166 敌兵布阵

    敌兵布阵是一个线段树典题,题目如下(点此查看题目出处): Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国 ...