介绍 & lt; div id=癮pp"比;
& lt; deniro-component :才能数=?“祝辞& lt;/deniro-component>
& lt;/div> Vue.component (& # 39; deniro-component& # 39;, {
名称:才能& # 39;deniro-component& # 39;
道具:{才能
,,,数:{
,,,,,类型:数字,
,,,,,默认值:1
,,,}
,,},
,模板:& # 39;\
& lt;才能div 类=癱hild"祝辞\
& lt;才能p>{{数}},微信大变样!看了这些新功能后,网友淡定不住了& lt;/p> \
,,,& lt; deniro-component \
,,,,,:数=癱ount + 1“\
,,,,,v=癱ount & lt;, 3“祝辞& lt;/deniro-component> \
,& lt;/div> \
& # 39;才能
});
var app =, Vue ({new
el才能:& # 39;#应用# 39;
,,数据:{}
}); & lt; div id=癮pp2"比;
& lt;才能deniro-component2 inline-template>
,,,& lt; div>
,,,,,& lt; h3>父组件中定义子组件模板& lt;/h3>
,,,,,& lt; p> {{content1}} & lt;/p>
,,,,,& lt; p> {{content2}} & lt;/p>
,,,& lt;/div>
& lt;才能/deniro-component2>
& lt;/div> Vue.component (& # 39; deniro-component2& # 39;, {
数据:才能function (), {
,,,return {
,,,,,content1: & # 39;双屏手机一碰就碎?实测结果意外(来源于子组件)& # 39;
,,,}
,,}
});
var app2 =, Vue ({new
el才能:& # 39;# app2 # 39;
,,数据:{
,,,content2: & # 39;人工智能正在改变所有行业,咖啡也将被消灭(来源于父组件)& # 39;
,,}
}); & lt; div id=癮pp2"比;
,& lt; div>
& lt;才能h3>父组件中定义子组件模板& lt;/h3>
& lt;才能p>双屏手机一碰就碎?实测结果意外(来源于子组件)& lt;/p>
& lt;才能p>人工智能正在改变所有行业,咖啡也将被消灭(来源于父组件)& lt;/p>
,& lt;/div>
& lt;/div> & lt; div id=癮pp3"比;
& lt;才能deniro-component3 :=癱urrentView"祝辞& lt;/deniro-component3>
& lt;才能button @click=案谋?& # 39;一个# 39;)“在切换到,A 组件& lt;/button>
& lt;才能button @click=案谋?& # 39;b # 39;)“在切换到,B 组件& lt;/button>
& lt;才能button @click=案谋?& # 39;c # 39;)“在切换到,C 组件& lt;/button>
& lt;/div> var app3 =, Vue ({new
el才能:& # 39;# app3 # 39;
,,组件:{
,,,componentA:, {
,,,,,模板:,& # 39;& lt; div>组件,A
& # 39;
,,,},
,,,componentB:, {
,,,,,模板:,& # 39;& lt; div>组件,B这篇文章主要介绍了Vue。js组件高级特性有哪些用法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
具体如下:
<强> 1递归
为组件设置的名字属性,这个组件就可以在自身的模板内递归调用自己。html:
js:
效果:
渲染结果:
可以利用组件的可递归特性,来实现一些具有不确定层级的组件,比如级联选择器和树型组件。
<强> 2内联模板
一般情况下,组件的模板都是在模板中定义的。我们也可以在组件标签中加上inline-template属性,这样组件就会把它的内容作为实际的模板内容。
内联模板可以接收父,子组件中声明的数据,所以更加灵活。html:
js:
渲染结果:
如果父子组件定义的数据同名,那么优先使用子组件中的数据。
因为作用域较难理解,所以除非必要,否则不建议使用。
<强> 3动态加载
我们可以使用是来实现动态挂载组件。html:
js:
