Vue 组件自己调用自己
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 组件自己调用自己相关的知识，希望对你有一定的参考价值。
参考技术A 允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。
我们知道使用 vue-cli 每创建一个组件的时候，在导出对象中就会自动生成一个name 属性，如果我们想要在该组件中嵌套本身，那么直接就可以在模板中使用name属性值 递归调用自身
例如：当我们创建一个组件 sideItem 时，会自动生成:name:"custom-list",递归调用自身如下：
父组件调用如下
子组件调用（看图中箭头）
本文参考 https://blog.csdn.net/lhjuejiang/article/details/82116612
vue组件的使用1
创建vue组件，看了别人的教程 http://www.cnblogs.com/keepfool/p/5625583.html，自己也总结一下
一、’创建vue组件有四个步骤：
全局组件
1.用Vue.extend()构建一个你需要渲染的html;
2.调用Vue.component(‘Html里自己创建的标签‘，1步骤中创建的构造器名称);
3.创建一个vue实例，让其他的挂载在其标签下面;
4.html中写自己要创建的标签
<div id="app1">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<my-component></my-component>
<script>
//first:creat a 组件构造器
var myComponent=Vue.extend({
template:‘<div>This is my first component!</div>‘
})
//2.注册组件，并制定组件的标签，组件的HTML标签为,<my-component>
Vue.component(‘my-component‘,myComponent)
var app1=new Vue({
el:‘#app1‘
});
var app2=new Vue({
el:‘#app2‘
})
</script>
二、局部组件
在vue实例下面注册component
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script>
var myComponent=Vue.extend({
template:‘<div>This is my first component!</div>‘
})
new Vue({
el:‘#app‘,
components:{
‘my-component‘:myComponent //这个标签下是局部的，那别的vue实例下就不能用
}
});
</script>
实现后的状态是
原来的自己创建的标签被替换成我vue.extend中的html
三、父子关系
要在一个组件中使用另外一个组件，这就存在一个父子关系~基本子组件放在父组件里面
<body>
<div id="app">
<parent-component></parent-component>
</div>
</body>
<script>
//父子关系
// 先构造子元素
var Child=Vue.extend({
template:‘<i>This is a Child!</i>‘
})
// 子级注册都是在父级构造的里面，
var Parent=Vue.extend({
template:‘<span>This is Parent!</span><child-component></child-component>‘,
components:{
‘child-component‘:Child
}
})
Vue.component(‘parent-component‘,Parent)
new Vue({
el:‘#app‘
})
</script>
四、发现新大陆 不需要那么多步骤
省掉了第一步的构造~自动内部构造，将构造和注册一起使用
Vue.component(‘parent-component‘,{ template:‘<div>This is the first component!‘ }) new Vue({ el:‘#app‘ })
以上是关于Vue 组件自己调用自己的主要内容，如果未能解决你的问题，请参考以下文章