vue父子组件的嵌套的示例代码


Posted in Javascript onSeptember 08, 2017

本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下:

组件的注册:

先创建一个构造器

var myComponent = Vue.extend({
  template: '...'
})

用Vue.component注册,将构造器用作组件(例为全局组件)

Vue.component('my-component' , myComponent)

注册局部组件:

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
 template: '...',
 components: {
  // <my-component> 只能用在父组件模板内
  'my-component': Child
 }
})

注册语法糖,简化过程

// 在一个步骤中扩展与注册
Vue.component('my-component', {
 template: '<div>A custom component!</div>'
})

// 局部注册也可以这么做
var Parent = Vue.extend({
 components: {
  'my-component': {
   template: '<div>A custom component!</div>'
  }
 }
})

父子组件嵌套的例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>index</title>
</head>
<body>
<div id="app">
  <parent></parent>
</div>
<script src="vue.js"></script>
<script>
  var childComponent = Vue.extend({
    template: '<p>this is child template</p>'
  });
  Vue.component("parent",{
    template: '<p>this is parent template</p><child></child><child></child>',
    components: {
      'child': childComponent,
    }
  });
  var app = new Vue({
    el: '#app'
  });
</script>
</body>
</html>

其与以下写法等价:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>index</title>
</head>
<body>
<template id="child">
  <p>this is child template</p>
</template>
<template id="parent">
  <p>this is parent template</p>
  <child></child>
  <child></child>
</template>
<div id="app">
  <parent></parent>
</div>
<script src="vue.js"></script>
<script>
  var childComponent = Vue.extend({
    template: '#child'
  });
  Vue.component("parent",{
    template: '#parent',
    components: {
      'child': childComponent,
    }
  });
  var app = new Vue({
    el: '#app'
  });
</script>
</body>
</html>

页面显示:

vue父子组件的嵌套的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
javascript每日必学之继承
Feb 23 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue观察模式浅析
Sep 25 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
浅谈Web Storage API的使用
Jun 23 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
通过button将form表单的数据提交到action层的实例
Sep 08 #Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 #Javascript
JavaScript实现图片拖曳效果
Sep 08 #Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 #Javascript
javascript将list转换成树状结构的实例
Sep 08 #Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 #Javascript
You might like
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python 中的divmod数字处理函数浅析
2017/10/17 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Django权限控制的使用
2021/01/07 Python
使用python实现学生信息管理系统
2021/02/25 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
小学美术教学反思
2014/02/01 职场文书
代理班主任的自我评价
2014/02/04 职场文书
小小的船教学反思
2014/02/21 职场文书
慈善晚会策划方案
2014/05/14 职场文书
房屋租房协议书范本
2014/12/04 职场文书
中国梦宣传标语口号
2015/12/26 职场文书