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 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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(5) 类和对象
2010/02/16 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php文件上传简单实现方法
2015/01/24 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
原生实现一个react-redux的代码示例
2018/06/08 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue头部导航动态点击处理方法
2018/11/02 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Python中super()函数简介及用法分享
2016/07/11 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
文秘专业应届生求职信
2014/05/26 职场文书
任命书格式
2014/06/05 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
高一化学教学反思
2016/02/22 职场文书
初三语文教学反思
2016/03/03 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis