vue父子组件的嵌套的示例代码
2017-09-08 09:30
796 查看
组件的注册:
先创建一个构造器
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-父子组件嵌套的示例
- VUE开发一个图片轮播的组件示例代码
- vue的一个分页组件的示例代码
- Vue中组件之间数据的传递的示例代码
- Vue2.0 组件传值通讯的示例代码
- Vue表单类的父子组件数据传递示例
- vue组件挂载到全局方法的示例代码
- vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i
- vue弹窗组件的实现示例代码
- 开发Vue树形组件的示例代码
- Vue无限滑动周选择日期的组件的示例代码
- vue父子组件的嵌套
- Vue父子、父子孙组件嵌套
- react.js 父子组件数据绑定实时通讯的示例代码
- Vue实现内部组件轮播切换效果的示例代码
- vue父子组件的数据传递示例
- vue2.0使用swiper组件实现轮播的示例代码
- vue loadmore组件上拉加载更多功能示例代码
- vue 开发一个按钮组件的示例代码
- vue组件中使用iframe元素的示例代码