vue学习—组件的定义注册
组件的定义注册
效果：
方法一：
<div id="box"><v-header></v-header>
<hr />
<br />
{{name}}
<hr />
<br />
<v-footer></v-footer>
</div>
<script>
//1.定义组件
var Header={
template:'<h2>这是一个头部组件</h2>'
}
//2.注册组件
Vue.component('v-header',Header);
var Footer={
template:'<h2>这是一个底部组件</h2>'
}
Vue.component('v-footer',Footer);/*组件名称不能用html标签*/
//注意: 组件名称不能和html标签一样
var vm=new Vue({
el:'#box',
data:{
name:'hello world'
}
})
</script>
方法二：
//定义组件和注册组件放在一起Vue.component('v-footer',{
template:'<div><h2>这是一个底部组件</h2></div>'
})
方法三（用的最多）：
//1.定义组件var Header={
template:'<h2>这是一个头部组件</h2>'
}
//1.定义组件
var Footer={
template:'<h2>这是一个footer组件</h2>'
}
var vm=new Vue({
el:'#box',
data:{
name:'ahah'
},
components:{
//2.注册组件
'v-header':Header,
'v-footer':Footer
}
})
方法四：
var vm=new Vue({ el:'#box',
data:{
name:'hhahhah'
},
components:{
'v-header':{
template:'<h2>这是一个头部组件</h2>'
},
'v-footer':{
template:'<h2>这是一个footer组件</h2>'
}
}
})
vue组件" title="vue组件">vue组件的定义注册-深入
<div id="box"><v-header></v-header>
<hr />
<br />
{{name}}
<hr />
<br />
<v-footer></v-footer>
</div>
<template id="header">
<div>
<h2>这是一个头部组件--{{msg}}</h2>
<div class="button" @click="setData()">
点击改变msg
</div>
</div>
</template>
<template id="footer">
<h2>这是一个底部组件--{{msg}}</h2>
</template>
<script>
var Header={
template:'#header',
data:function(){
return {
msg:'这是头部组件的msg'
}
},methods:{
setData:function(){
this.msg='改变头部组件的内容'
}
}
}
var Footer={
template:'#footer',
data:function(){
return {
msg:'这是底部组件的msg'
}
}
}
var vm=new Vue({
el:'#box',
data:{
name:'haha'
},
components:{
'v-header':Header,
'v-footer':Footer
}
})
</script>
点击按钮之后：
//------------------------------------------------------------------------------------------
vue组件 - 模板
<div id="box">{{msg}}
<v-header></v-header>
<br />
<br />
<v-footer></v-footer>
</div>
<script type="x-template" >
<div class="header">
<h2>这是标题</h2>
<p>{{msg}}</p>
<button @click="run()">这是一个按钮</button>
</div>
</script>
<template >
<div class="footer">
<h2>这是底部组件的标题</h2>
<p>这是一个底部组件的内容</p>
<p>这是一个底部组件的内容</p>
</div>
</template>
<script>
//注意：模板里面所有的东西要被根元素包裹起来
//定义组件
var Header={
template:'#header',
data:function(){
return {
msg:'这是头部，哈哈哈'
}
},methods:{
run:function(){
alert('run');
}
}
}
var Footer={
template:'#footer'
}
var vm=new Vue({
el:'#box',
data:{
msg:'hello vue'
},
components:{
//注册组件
'v-header':Header,
'v-footer':Footer
}
})
</script>
vue父子组件
介绍
<div id="box">{{a}}
<br />
<v-header></v-header>
</div>
<template id="header">
<div>
<h2>
我是头部组件11-{{msg}}
<br />
<v-nav></v-nav>
</h2>
</div>
</template>
<template id="nav">
<div>
<h2>这是一个nav组件--{{msg}}</h2>
</div>
</template>
<script>
//要放在组件 v-nav的定义之前
var Nav={
template:'#nav',
data:function(){
return {
msg:'我是nav内容'
}
}
}
var Header={
template:'#header',
data:function(){
return {
msg:'我是header内容'
}
},components:{
'v-nav':Nav
}
}
var vm=new Vue({
el:'#box',
data:{
a:'我是大box'
},
components:{
'v-header':Header,
}
})
</script
以上是 vue学习—组件的定义注册 的全部内容， 来源链接： utcz.com/z/374824.html
