一般情况下封装一个导航组件的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<button @click=‘exchange_nevigation‘>点击切换</button>
<v-anchor :title="title" :level=‘level‘>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/x-template" id=‘template1‘>
<div>
<h1 v-if="level===1" :title=‘title‘>
<a :href="‘#‘+title">
<slot></slot>
</a>
</h1>
<h2 v-if=‘level===2‘>
<a :href="‘#‘+title">
<slot></slot>
</a>
</h2>
<h3 v-if=‘level===3‘>
<a :href="‘#‘+title">
<slot></slot>
</a>
</h3>
<h4 v-if=‘level===4‘>
<a :href="‘#‘+title">
<slot></slot>
</a>
</h4>
</div>
</script>
<script>
Vue.component(‘v-anchor‘,{
template:"#template1",
props: {
level:{
type:Number,
required:true
},
title:{
type:String,
default:""
}
}
})
new Vue({
el:"#app",
data:{
title:‘一级导航‘,
msg:"一级导航",
level:1
},
methods:{
exchange_nevigation:function(){
var arr=[‘一‘,‘二‘,‘三‘,‘四‘];
if(this.level===4){this.level=1;
this.title=arr[0]+‘级导航‘}else{
this.title=arr[this.level]+‘级导航‘;
this.level+=1
}
}
}
})
</script>
</body>
</html>
使用render函数的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<button @click=‘exchange_nevigation‘>点击切换</button>
<v-anchor :title="title" :level=‘level‘>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component(‘v-anchor‘,{
render: function (createElement) {
return createElement(
‘h‘+this.level,
[
createElement(
‘a‘,{
domProps:{
href:‘#‘+this.title
}
},
this.$slots.default
)
]
)
},
props: {
level:{
type:Number,
required:true
},
title:{
type:String,
default:""
}
}
})
new Vue({
el:"#app",
data:{
title:‘一级导航‘,
msg:"一级导航",
level:1
},
methods:{
exchange_nevigation:function(){
var arr=[‘一‘,‘二‘,‘三‘,‘四‘];
if(this.level===4){this.level=1;
this.title=arr[0]+‘级导航‘}else{
this.title=arr[this.level]+‘级导航‘;
this.level+=1
}
}
}
})
</script>
</body>
</html>
同上，实现了同样的效果
关于render函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component(‘v-anchor‘,{
render: function (createElement) {
return createElement(
//第一个参数是标签，必须填写，形式{String|Object|Function}
‘div‘,
//第二个参数是对应属性的数据对象可以选填
{style:{
height:"100px",
width:"100px",
border:"1px solid black",
background:‘yellow‘
}},
//子节点,可选填
[createElement(‘h1‘,{
domProps:{
innerHTML:‘测试‘
},
style:{
color:‘red‘
}
})]
)
}
})
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
1.render函数的内容必须return出来
2.它包括三个参数
2-1.第一个参数是标签，可以是函数或者字符串或者对象的形式产生
2-2.第二个参数是该标签的数据对象，也可以使用template
3.第三个参数使它的子节点，可以选填，写法和父节点一样
关于render的第二个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.a1{
color:red
}
</style>
<body>
<div id="app" v-cloak>
<v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component(‘v-anchor‘,{
render: function (createElement) {
return createElement(
//第一个参数是标签，必须填写，形式{String|Object|Function}
‘h1‘,
//第二个参数是对应属性的数据对象可以选填
{
//和v-bind:class一样
‘class‘:{
a1:true
},
//和v-bind:style一样
style:{
fontSize:‘100px‘,
textShadow:‘2px 2px 2px black‘,
textAlign:‘center‘
},
//正常的HTML特性
attrs:{
id:"my_h1",
title:"我是render生成"
},
//自定义事件监听
on:{
click:this.popup
},
//自定义指令
directives:[
]
//作用域slot
},
//子节点,可选填
[createElement(‘p‘,{
//DOM属性
domProps:{
innerHTML:‘测试‘
},
style:{
color:‘red‘
}
})]
)
},
methods:{
popup:function(){
alert(‘测试‘)
}
}
});
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
时间： 2024-11-03 12:48:50