欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

說說Vue.js中的functional函數(shù)化組件的使用

 更新時間：2019年02月12日 14:20:24   作者：deniro  
這篇文章主要介紹了說說Vue.js中的functional函數(shù)化組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Vue.js 組件提供了一個 functional  開關(guān)，設(shè)置為 true 后，就可以讓組件變?yōu)闊o狀態(tài)、無實例的函數(shù)化組件。因為只是函數(shù)，所以渲染的開銷相對來說，較小。

函數(shù)化的組件中的 Render 函數(shù)，提供了第二個參數(shù) context 作為上下文，data、props、slots、children 以及 parent 都可以通過 context 來訪問。

1 示例

這里，我們用  functional 函數(shù)化組件來實現(xiàn)一個智能組件。

html：

<div id="app">
  <smart-component :data="data"></smart-component>
  <button @click="change('img')">圖片組件</button>
  <button @click="change('video')">視頻組件</button>
  <button @click="change('text')">文本組件</button>
</div>

js：

//圖片組件設(shè)置
var imgOptions = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '圖片組件'),
      createElement('img', {
        attrs: {
          src: this.data.url,
          height: 300,
          weight: 400

        }
      })
    ]);
  }
};

//視頻組件設(shè)置
var videoOptions = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '視頻組件'),
      createElement('video', {
        attrs: {
          src: this.data.url,
          controls: 'controls',
          autoplay: 'autoplay'
        }
      })
    ]);
  }
};

//文本組件設(shè)置
var textOptions = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '文本組件'),
      createElement('p', this.data.content)
    ]);
  }
};

Vue.component('smart-component', {
  //設(shè)置為函數(shù)化組件
  functional: true,
  render: function (createElement, context) {
    function get() {
      var data = context.props.data;

      console.log("smart-component/type:" + data.type);
      //判斷是哪一種類型的組件
      switch (data.type) {
        case 'img':
          return imgOptions;
        case 'video':
          return videoOptions;
        case 'text':
          return textOptions;
        default:
          console.log("data 類型不合法：" + data.type);
      }
    }

    return createElement(
      get(),
      {
        props: {
          data: context.props.data
        }
      },
      context.children
    )
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    data: {}
  },
  methods: {
    change: function (type) {
      console.log("輸入類型：" + type);
      switch (type) {
        case 'img':
          this.data = {
            type: 'img',
            url: 'http://pic-bucket.ws.126.net/photo/0001/2019-02-07/E7D8PON900AO0001NOS.jpg'
          }
          break;
        case 'video':
          this.data = {
            type: 'video',
            url: 'http://wxapp.cp31.ott.cibntv.net/6773887A7F94A71DF718E212C/03002002005B836E73A0C5708529E09C1952A1-1FCF-4289-875D-AEE23D77530D.mp4?ccode=0517&duration=393&expire=18000&psid=bbd36054f9dd2b21efc4121e320f05a0&ups_client_netip=65600b48&ups_ts=1549519607&ups_userid=21780671&utid=eWrCEmi2cFsCAWoLI41wnWhW&vid=XMzc5OTM0OTAyMA&vkey=A1b479ba34ca90bcc61e3d6c3b2da5a8e&iv=1&sp='
          }
          break;
        case 'text':
          this.data = {
            type: 'text',
            content: '《流浪地球》中的科學(xué)：太陽何時吞并地球？科學(xué)家已經(jīng)給出時間表'
          }
          break;
        default:
          console.log("data 類型不合法：" + type);
      }

    }
  },
  created: function () {
    //默認(rèn)為圖片組件
    this.change('img');
  }

});

效果：

  • 首先定義了圖片組件設(shè)置對象、視頻組件設(shè)置對象以及文本組件設(shè)置對象，它們都以 data 作為入?yún)ⅰ?/li>
  • 函數(shù)化組件 smart-component，也以  data 作為入?yún)ⅰ?nèi)部根據(jù) get() 函數(shù)來判斷需要渲染的組件類型。
  • 函數(shù)化組件 smart-component 的 render 函數(shù)，以 get() 作為第一個參數(shù)；以 smart-component 所傳入的 data，作為第二個參數(shù)：
return createElement(
  get(),
  {
    props: {
      data: context.props.data
    }
  },
  context.children
)


根實例 app 的 change 方法，根據(jù)輸入的類型，來切換不同的組件所需要的數(shù)據(jù)。

2 應(yīng)用場景

函數(shù)化組件不常用，它應(yīng)該應(yīng)用于以下場景：

  • 需要通過編程實現(xiàn)在多種組件中選擇一種。
  • children、props 或者 data 在傳遞給子組件之前，處理它們。

本文示例代碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 還在用vuex?來了解一下pinia

    還在用vuex?來了解一下pinia

    這篇文章主要為大家詳細(xì)介紹了pinia，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vue2.0組件之間傳值、通信的多種方式(干貨)

    vue2.0組件之間傳值、通信的多種方式(干貨)

    這篇文章主要介紹了vue2.0組件之間傳值、通信的多種方式以及注意要點，需要的朋友可以參考下
    2018-02-02
  • Vue實現(xiàn)簡易翻頁效果源碼分享

    Vue實現(xiàn)簡易翻頁效果源碼分享

    本文給大家分享了vue實現(xiàn)簡易翻頁效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-11-11
  • Vue2 Watch監(jiān)聽操作方法

    Vue2 Watch監(jiān)聽操作方法

    這篇文章主要介紹了Vue2 Watch監(jiān)聽,通過watch監(jiān)聽器,我們可以實時監(jiān)控數(shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進(jìn)行相應(yīng)的操作,需要的朋友可以參考下
    2023-12-12
  • vue3動態(tài)加載組件以及動態(tài)引入組件詳解

    vue3動態(tài)加載組件以及動態(tài)引入組件詳解

    ?平常的vue項目開發(fā),已經(jīng)很難遇見一千行,甚至幾千行代碼的頁面了,畢竟大家都會去拆分組件,下面這篇文章主要給大家介紹了關(guān)于vue3動態(tài)加載組件以及動態(tài)引入組件的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • vue 子組件watch監(jiān)聽不到prop的解決

    vue 子組件watch監(jiān)聽不到prop的解決

    這篇文章主要介紹了vue 子組件watch監(jiān)聽不到prop的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue大型項目之分模塊運行/打包的實現(xiàn)

    vue大型項目之分模塊運行/打包的實現(xiàn)

    這篇文章主要介紹了vue大型項目之分模塊運行/打包的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例

    Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例

    這篇文章主要介紹了Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定

    詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定

    這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實用價值，需要的朋友可以參考下
    2017-05-05
  • Vue 如何追蹤數(shù)據(jù)變化

    Vue 如何追蹤數(shù)據(jù)變化

    這篇文章主要介紹了Vue 如何追蹤數(shù)據(jù)變化，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
    2021-04-04

最新評論