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. 2019年3月8日A股百点暴跌行情思考

    本人操作: [海通证券]:早盘挂单并撤单,盘中高位卖出,尾盘低位接回. 总结 - 正确:持股数量不变,成本降低. [信雅达]:早盘低开加仓,盘中高位卖出,跌后接回,尾盘跌停. 总结 -  正确:加仓, ...

  2. TCP/IP HTPP

    TCP/IP:Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议,是Internet最基本的协 ...

  3. 项目实战02：nginx 反向代理负载均衡、动静分离和缓存的实现

    目录 实验一:实现反向代理负载均衡且动静分离 1.环境准备: 2.下载编译安装tengine 3.设置代理服务器的配置文件 4.启动tengine服务 5.开启后端的web服务 6.测试 实验二:ng ...

  4. scala-创建泛型数组（T: Manifest）

    def arrayT[T: Manifest](ary: T*): Array[T] = {//接受多个参数 val arys = new Array[T](ary.length) //初始化一个数组 ...

  5. Redis的数据结构之List

    存储list: ArrayList使用数组方式 LinkedList使用双向链接方式 双向链接表中增加数据 双向链接表中删除数据 存储list常用命令 两端添加 两端弹出 扩展命令 lpush 方式添 ...

  6. 关于systemctl

    systemctl是CentOS7的服务管理工具中主要的工具,它融合之前service和chkconfig的功能于一体. 启动一个服务:systemctl start firewalld.servic ...

  7. 接口测试工具-Jmeter使用笔记（六：从文本读取参数）

    使用场景:测试一个接口并发处理数据的能力,并且每次请求传入的参数都要不同. 解决方法--- CSV Data Set Config 列举一个实例,步骤中会侧重读取参数操作的说明,其他有疑问的步骤请查阅 ...

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

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

  9. [js]js杂项陆续补充中...

    hasOwnProperty判断对象是否有这个属性 p = { 'name': 'maotai', 'age': 22 }; console.log(p.hasOwnProperty('names') ...

  10. OAuth2认证和授权入门

    OAuth2四种授权方式 四种授权方式 OAuth 2.0定义了四种授权方式. 密码模式(resource owner password credentials) 授权码模式(authorizatio ...