3 Vue 组件扩展

组件（Component）是Vue.js 最强大的功能之一。组件可以扩展HTML 元素，
封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

全局组件

<div id="app">
<common_head></common_head>  // 引入模板（名的标签）
</div>
<script>
Vue.component('common_head',    // 构建一个全局的组件，名字是common_head（都小写）
{
template: '<b>头信息</b>'  // 模板
});
new Vue({
el: '#app'
});
</script>

局部组件

<div id="app">
<common_head></common_head>
</div>
<script>
new Vue({
el: '#app',
components: {
'common_head': {
template: '<b>头信息</b>'
}
}
});

组件传值

1.静态传值

<div id="app">
<common_head message="hello vue.js"></common_head>
</div>
<script>
new Vue({
el: '#app',
components: {
'common_head': {
props: ['message'],
template: '<b>头信息:{{message}}</b>'   // 必须得有标签
}
}
});
</script>

2.动态传值

<div id="app">
<input type="text" v-model="username">
<common_head v-bind:message="username"></common_head>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '初始化值'
},
components: {
'common_head': {
props: ['message'],
template: '<b>头信息:{{message}}</b>'    // 必须得有标签
}
}
});

• 点赞
• 收藏
• 分享
• 文章举报