一般情況下封裝一個導航組件的寫法
<!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>
