vue component组件小结
了解完vue的一些必须知道的事情，就该看看vue的组件了，本部分我们以代码进行分析。什么是组件？ 就我而言，组件就是按照自己的需求自定义的元素，充分体现了打代码的重用性。官方文档如下： 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊
·
了解完vue的一些必须知道的事情，就该看看vue的组件了，本部分我们以代码进行分析。
什么是组件？
就我而言，组件就是按照自己的需求自定义的元素，充分体现了打代码的重用性。官方文档如下：
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。
我们以代码来了解vue组件
<body>
<div id="component">
<child v-html="msg"></child>1，首先我们定义在实例化的Vue内部定义组件child并使用
<!--解决DOM解析问题--> 2，对于标准的html而言有些标签对其子标签有一定的要求，is来解决
<table>
<tr is="child1"></tr>
</table>
<!--构造组件--> 3，下面是构造一个外部组件并传入数据，利用Vue.component()来构建
<child3 msg3="gouzao"></child3>
<!-- 内部切换组件--> 4，对于多个组件的切换问题，首先在引用组建时我们以<component v-bind:is="XXX"></componment>来引用，XXX处为你所需要的标签
<input v-model="current">
<component v-if="current=='child'" v-bind:is="current" msg="ninini"></component>
<component v-else v-bind:is="current"></component>
<button v-on:click="childbtn">childbtn</button>
<button v-on:click="child1btn">childbtn1</button>
<button v-on:click="child2btn">childbtn2</button>
</div>
<script src="js/vue.js"></script>
<script>
//独立建立组件
Vue.component('child3',{
props:['msg3'],
template:'<p>{{msg3}}</p>'
});
//内部组件切换
var child={
props:['msg'],
template:"<p>{{msg}}</p>"
};
var child1={
template:"<p>nihao</p>"
};
//组件嵌套 5，嵌套组件的定义方式如下，当调用父组件标签是自动加入子组件标签
var child2={
template:"<p>child2<chridren></chridren></p>",
components:{
'chridren':child1
}
};
new Vue({
el:"#component",
data:{
msg:"宝宝来咯",
current:'child2'
},
components:{
'child':child,
'child1':child1,
'child2':child2
},
methods:{
childbtn:function(){
this.current='child'
},
child1btn:function(){
this.current='child1'
},
child2btn:function(){
this.current='child2'
}
}
});
</script>
</body>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)