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. [01-01]oracle数据库汉化

    oracle汉化方法: 1.下载oracle工具,下载与自己电脑版本相关的oracle工具,可在电脑 [控制面板] - [系统和安全] - [系统] 查看电脑版本 32位或64位,oracle工具下载 ...

  2. sass基础学习（一）

    移动端布局各种问题 pc端布局各种问题sass 组件模块化面向对象编程ajax 框架学习 webpack 打包 性能优化 gulp是基于Nodejs的自动任务运行器她能自动化地完成 javascrip ...

  3. jquery网页倒计时效果，秒杀

    function FreshTime(){ var endtime=new Date('2019-4-12 18:00:00');//结束时间 var nowtime = new Date();//当 ...

  4. postman进行接口测试

    1.添加header 2.入参为json格式 3.添加cookie 4.上传文件

  5. qmp的简单使用

    QMP是一种基于JSON格式的传输协议,可使用QMP与一个QEMU虚拟机实例进行交互,例如查询虚拟机的相关状态等,以下就QMP的使用进行简单介绍. 可以通过libvirt向一个运行的虚拟机发送qmp命 ...

  6. vue 点击弹窗外框关闭弹框

    https://blog.csdn.net/zjw0742/article/details/77822777 ready() { document.addEventListener('click', ...

  7. 5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换

    1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewp ...

  8. POJ 3264 线段树入门解题报告

    题意:给n个值, Q次询问, 每次询问给定一个区间, 要求输出该区间最大最小值之差 思路:暴力的话每次询问都要遍历多次for循环一定会超时, 用线段树记录区间的信息(左边界右边界, 该区间最大值最小值 ...

  9. 32位ubuntu16.4编译android4.1.1

    安装所需库 sudo apt-get install build-essential sudo apt-get install make sudo apt-get install gcc sudo a ...

  10. Eureka服务注册与发现

    一.服务注册 注册Eureka的服务非常的简单,只需要引入spring-cloud-starter-netflix-eureka-client的jar包即可. <dependency> & ...