vue.js组件的详解
组件(component)是vue.js的强大功能之一
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
图片来源于网络
1.组件的注册语法格式如下:
Vue.component('组件名tagname',配置选项)
2.注册了组件后就可以调用了
<tagname></tagname>
3.全局组件和局部组件
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' })
// 创建根实例
new Vue({
el: '#app'
})
</script>
---------------这里是分割线-------------------------------
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = { template: '<h1>自定义组件!</h1>' }
// 创建根实例
new Vue({ el: '#app', components: {
// <runoob> 将只在父模板可用 'runoob': Child
} })
</script>
4.关于对父组件和子组件的理解,不多比比,上代码
<zujian></zujian>
Vue.component('zujian',{
template:'<h></h>'
})
上面代码中,其实这个<zujian>就相当于下面<h3>的父级组件!是不是很惊讶,就是这么简单
再举个例子,传输数据
<zujian message="飞天"></zujian>
//我要把上面message的数据:飞天,用到<h>里面去
Vue.component('zujian',{
props:['message']//子组件要用父组件的数据必须要用props声明
template:'<h>{{message}}</h>'
})
结果:输出字符串:飞天
注意:
//子组件要用父组件的数据必须要用props声明
//子组件要用父组件的数据必须要用props声明
//子组件要用父组件的数据必须要用props声明