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

本文介绍了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>

页面显示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 多层组件嵌套二种实现方式(测试实例)

    最近在研究vue组件的学习,给自己留个笔记,也分享给大家,希望能对大家有所帮助 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例-组件嵌套二种方式</title> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> &

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

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

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • vue el-table实现递归嵌套的示例代码

    vue el-table实现递归嵌套的示例代码

    说明: el-table有一个表格一级数据和二级数据显示的是一样的,像这种就可以用递归实现.数据结构是这样子的: tableData:[{ name: "Lucy", age: 18, mobile: "11111111111", type: 1, friends:[{ name: "Lucy-friend1", age: 16, mobile: "11111111111" },{ name: "Lucy-frien

  • vue父子组件的数据传递示例

    vue父子组件的数据传递示例

    1.父组件向子组件传递数据 <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数 //据,需

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    目录 方式一:通过监听事件实现 方式二:通过 v-model 实现 方式一:通过监听事件实现 父组件将数据传递给子组件通过 props 实现:而子组件将数据传递给父组件通过事件来实现,在子组件中定义一个事件,在该事件中传递值,由父组件中监听这个事件.通过这种方式实现父子组件双向绑定的效果最常见. 子组件案例代码: <template> <el-select v-model="value" placeholder="请选择" @change=&quo

  • 使用form-create动态生成vue自定义组件和嵌套表单组件

    使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreate.maker.create('i-button').props({ type:'primary', field:'btn' loading:true }) ] $f = formCreate.create(rule); 上面的代码是通过maker生成器动态生成一个

  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    当我们在书写 vue 组件的时候,也许可能会用到数据传递:将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件: 每当我们遇到这样的需求的时候,我们总是会想到有三种解决办法: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus ,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递. 后来再逛社区的时候我又发现了还有第四种传递方式, inheritAttrs +

  • Vue 实现展开折叠效果的示例代码

    Vue 实现展开折叠效果的示例代码

    本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc

  • vue父子组件的通信方法(实例详解)

    一.父组件向子组件传递数据 1.首先形成父子组件关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body>

  • 深入理解Vue父子组件生命周期执行顺序及钩子函数

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例

随机推荐