Vue.js中怎么使用無(wú)狀態(tài)組件

這篇文章主要介紹Vue.js中怎么使用無(wú)狀態(tài)組件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

如何在Vue中的工作流中使用無(wú)狀態(tài)組件

Vue應(yīng)用程序狀態(tài)是一個(gè)確定組件行為的對(duì)象。Vue應(yīng)用程序狀態(tài)指示組件如何呈現(xiàn)或如何動(dòng)態(tài)。

在你開始之前

你需要在你的電腦:

node.js 10.x及以上版本已安裝。通過在終端/命令提示符下運(yùn)行以下命令，可以驗(yàn)證是否具有此版本的node.js：

node -v

• Visual Studio代碼編輯器(或類似的代碼編輯器)

• 在您的計(jì)算機(jī)上全局安裝Vue的最新版本

• 在您的機(jī)器上安裝了Vue CLI 3.0

要做到這一點(diǎn)，首先卸載舊的CLI版本:

npm uninstall -g vue-cli

接下來(lái)，安裝一個(gè)新的:

npm install -g @vue/cli

• 在這里下載一個(gè)Vue入門項(xiàng)目

• 解壓下載的項(xiàng)目

• 導(dǎo)航到解壓縮的文件，并運(yùn)行命令，以保持所有的依賴關(guān)系最新:

npm install

引言:什么是狀態(tài)和實(shí)例?

Vue應(yīng)用程序狀態(tài)是一個(gè)確定組件行為的對(duì)象。Vue應(yīng)用程序狀態(tài)指示組件如何呈現(xiàn)或如何動(dòng)態(tài)。

同時(shí)，vue實(shí)例是一個(gè)viewmodel，它包含一些選項(xiàng)，包括表示元素的模板、要裝入的元素、方法和初始化時(shí)的生命周期掛鉤。

Vue組件

js中的組件通常是被動(dòng)的：在vue.js中，數(shù)據(jù)對(duì)象可以有很多選項(xiàng)用于概念、計(jì)算屬性、方法和觀察程序。此外，數(shù)據(jù)對(duì)象會(huì)在數(shù)據(jù)值更改時(shí)重新呈現(xiàn)。

相反，功能組件不保持狀態(tài)。

功能組件

從本質(zhì)上講，函數(shù)組件是具有自己的組件的函數(shù)。功能組件沒有狀態(tài)或?qū)嵗?，因?yàn)樗鼈儾槐４婊蚋櫊顟B(tài)。此外，您不能在功能組件中訪問構(gòu)造。

功能組件是為了表示而創(chuàng)建的。Vue.js中的功能組件與React.js中的類似。在Vue中，開發(fā)人員可以通過傳遞上下文輕松地使用功能組件直接構(gòu)建整潔的組件。

語(yǔ)法功能組件

從官方文檔來(lái)看，功能組件是這樣的:

Vue.component('my-component', {
  functional: true,
  // Props are optional
  props: {
    // ...
  },
  // To compensate for the lack of an instance,
  // we are now provided a 2nd context argument.
  render: function (createElement, context) {
    // ...
  }
})

創(chuàng)建功能組件

創(chuàng)建功能組件時(shí)要記住的一個(gè)關(guān)鍵準(zhǔn)則是功能屬性。函數(shù)屬性在組件的模板部分或腳本部分中指定。模板部分語(yǔ)法如下所示：

<template functional>
  <div> <h2> hello world</h2>
  </div>
</template>

你可以像這樣指定腳本的屬性:

export default {
  functional: true,
  render(createElement) {
    return createElement(
      "button", 'Click me'
    );
  }
};

為什么功能組件很重要?

功能組件可以快速執(zhí)行，因?yàn)樗鼈儧]有狀態(tài)，并且在數(shù)據(jù)值發(fā)生更改時(shí)，不會(huì)經(jīng)歷相同的初始化和重新呈現(xiàn)過程。

大多數(shù)情況下，功能組件對(duì)于表示或顯示循環(huán)項(xiàng)非常有用。

演示

在這個(gè)介紹性的演示中，您將看到帶有Vue模板的單頁(yè)面組件類型演示和功能組件的呈現(xiàn)函數(shù)類型演示。

單頁(yè)功能組件

打開test.vue文件并將下面的代碼塊復(fù)制到該文件中：

<template functional>
  <div>
    <p v-for="brand in props.brands" :key="brand">{{brand}} </p>
  </div>
</template>
<script> 
export default {
  functional: true,
  name: 'Test',
  props: {
    brands: Array
  }
}
</script>

腳本和模板中的功能指示器顯示這是一個(gè)功能組件。注意，仍然可以傳遞道具——它們是在功能組件中可以傳遞的惟一數(shù)據(jù)值。

暫時(shí)的數(shù)據(jù)道具持有也可以循環(huán)通過。

打開您的app.vue文件，將下面的代碼塊復(fù)制到其中:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">
    </Test>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

這里，您將看到props引用與冒號(hào)一起使用。

使用以下命令在dev服務(wù)器中運(yùn)行應(yīng)用程序:

npm run serve

你的瀏覽器的結(jié)果應(yīng)該是這樣的:

呈現(xiàn)函數(shù)方法

功能組件也可以包含呈現(xiàn)函數(shù)。

開發(fā)人員使用呈現(xiàn)函數(shù)來(lái)創(chuàng)建他們自己的虛擬DOM，而不使用Vue模板。

使用渲染函數(shù)在cars列表下創(chuàng)建一個(gè)新按鈕。在你的項(xiàng)目文件夾中創(chuàng)建一個(gè)名為example.js的新文件，并將下面的代碼塊復(fù)制到文件中:

export default {
    functional: true,
    render(createElement, { children }) {
      return createElement("button", children);
    }
  };

這將在功能組件中創(chuàng)建一個(gè)呈現(xiàn)函數(shù)來(lái)顯示按鈕，并使用元素上的子節(jié)點(diǎn)作為按鈕文本。

打開app.vue文件，將下面的代碼塊復(fù)制到文件中:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">
    </Test>
    <Example>
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Example from './Example'
export default {
  name: 'app',
  components: {
    Test, Example
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如果再次運(yùn)行該應(yīng)用程序，您將看到find more cars（查找更多汽車）子節(jié)點(diǎn)現(xiàn)在是按鈕的文本。示例組件在檢查時(shí)顯示為功能組件。

添加點(diǎn)擊事件

您可以在組件上添加單擊事件，并在根組件中包含該方法。但是，您需要render函數(shù)中的數(shù)據(jù)對(duì)象參數(shù)來(lái)訪問它。

復(fù)制這個(gè)在你的example.js文件:

export default {
    functional: true,
    render(createElement, { data, children }) {
      return createElement("button", data, children);
    }
  };

現(xiàn)在，將單擊事件添加到根組件中，Vue將識(shí)別它。將以下內(nèi)容復(fù)制到您的app.vue文件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">
    </Test>
    <Example @click="callingFunction">
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Example from './Example'
export default {
  name: 'app',
  components: {
    Test, Example
  },
  methods: {
    callingFunction() {
      console.log("clicked");
    }
  }
}
</script>

除了上面的示例之外，您還可以在官方文檔中列出的功能組件中使用其他參數(shù)。

以上是“Vue.js中怎么使用無(wú)狀態(tài)組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！