Render函數（3）：函數式組件、JSX初接觸

時間 2019-12-01

標籤 render 函數組件 jsx 接觸简体版

原文原文鏈接

寫在前面：說實話視頻學習的方式真的不適合我...以前在B站和慕課上的Vue視頻學的組件啊Vuex啊router真的只是囫圇吞棗啊，會用是會用，可是呆的很。html

仍是紙質適合我，應該這一週就能複習完Vuex和router了，衝！vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="Vue.2.6.10.js"></script>
</head>
<body>
    <div id="app1">
        <smart-item :data='data'></smart-item>
        <button @click='change("img")'>切換至圖片組件</button>
        <button @click='change("video")'>切換至視頻組件</button>
        <button @click='change("text")'>切換至文字組件</button>
    </div>
</body>
<script>
    //vue提供了一個functional的布爾值選項（註冊組件時），若設置爲true，則會使得組件無狀態、無實例，即沒有data、this上下文，這樣使用render函數
    //返回的虛擬節點能夠更容易渲染，由於函數化的組件只是一個函數（即functional爲true）
    //圖片組件選項
    var imgComp = { props:['data'], render(h) { return createElement('div',[ createElement('p','圖片組件'), createElement('img',{ attrs:{ src:this.data.url } }) ]); }, }; var videoComp = { props:['data'], render:function(createElement){ return createElement('div',[ createElement('p','視頻組件'), createElement('video',{ attrs:{ src:this.data.url, controls:'controls', autoplay:'autoplay' } }) ]); } }; var textComp = { props:['data'], render:function(createElement){ return createElement('div',[ createElement('p','文本組件'), createElement('p',this.data.text) ]); } }; Vue.component('smart-item',{ //函數化組件
 functional:true, render:function(createElement,context){//使用函數化組件時，render函數提供了第二個參數context
        //來提供臨時上下文，組件中須要的data、props、slots、children、parent都是經過它來傳遞的
        //this.level---context.props.level, this.$slots.default---context.children
            function getCom(){ var data = context.props.data; if(data.type === 'img') return imgComp; if(data.type === 'video') return videoComp; return textComp; }; return createElement( getCom(), { props:{ data:context.props.data//從組件smart-item傳向上面getCom()返回的組件 
 } }, context.children//父組件插槽的默認內容
 ) }, props:{ data:{ type:Object, required:true } } }); var app1 = new Vue({ el:"#app1", data:{ data:{}//默認爲對象嗷
 }, methods: { change:function(type){ if(type === 'img'){ this.data = { type:'img', url:'' } }else if(type === 'video'){ this.data = { type:'video', url:'' } }else if(type === 'text'){ this.data = { type:'text', text:'文本組件，衝！' } } } }, created() { this.change('text'); }, }); //jsx是什麼？它是一種看起來像html，但其實是js的語法擴展
    // // createElement&jsx：
    // render(createElement){
    // return createElement('div',{
    // props:{
    // text:'some text'
    // },
    // attrs:{
    // id:'myDiv'
    // },
    // domProps:{
    // innerHTML:'content'
    // },
    // on:{
    // change:this.change
    // },
    // nativeOn:{
    // click:this.clickHandler
    // },
    // class:{
    // show:true,
    // on:false
    // },
    // style:{
    // color:"#fff",
    // background:'#f50'
    // },
    // key:'key',
    // ref:'element',
    // slot:'slot'
    // })
    // };//改寫爲jsx以下：
    // render(h) {
    // return {
    // <div 
    // id='myDiv'
    // domPropsInnerHTML='content'
    // onChange = {this.change}
    // class={{ show:true, on:false }}
    // style = {{ ... }}

    // }
    // }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。