Props

你可能對於像 React、Vue 或 Svelte 這樣的現代 JavaScript 框架中的屬性概念很熟悉。 注意：我之前寫過相關文章，你可以在 React Props、Vue Props 和 Svelte Props 找到這些文章。 屬性是我們將信息傳遞給組件的方式。這包括變數和函數。 Astro 組件 也支持屬性。 以下是如何使用它們。 假設你在 src/components/Hello.astro 中定義了一個 Hello 組件： <p>Hello！</p> 在使用組件時，你可以為它傳遞一個名為 name 的屬性，像這樣：<Hello name="Flavio" />，你可以使用以下語法在組件輸出中顯示名稱： <p>Hello {Astro.props.name}！</p> 通常，在組件的 frontmatter 部分使用對象解構將屬性提取到單獨的變量中，這在擁有複雜組件時很方便： --- const { name } = Astro.props --- <p>Hello {name}！</p> 下面是如何處理多個屬性，以支持這樣的使用方式：<Hello name="Flavio" message="歡迎" /> --- const { name, message } = Astro.props --- <p>{message} {name}！</p> 以這種方式，你可以為未設置的屬性提供默認值： --- const { name = '', message = 'Hello' } = Astro....

當您使用 React Router 以動態參數的方式時，一個非常常見的需求是獲取我們在頁面中顯示的數據。 舉個例子，假設我們有一個項目列表，點擊項目後會進入項目詳情頁，URL 地址為 /project/PROJECT_ID。 我找到了兩種方法來實現這個需求。 首先，在路由中聲明這樣的路徑： <Route path="/project/:id"> <SingleProject /> </Route> 注意這裡的 /project/:id 路徑。這表示該組件將接收到 id 參數中的動態部分。 接下來，在 SingleProject 組件中，我們可以使用 useParams 鉤子來獲取 id 參數： import { useHistory, useParams } from 'react-router-dom'; //... const { id } = useParams(); 在我的案例中，我使用這個 id 參數從一個項目數組中過濾出數據，但您也可以使用它來查詢數據庫或者進行其他任務。 另一種方式是使用 props： <Route path="/project/:id" render={(props) => <SingleProject {...props} />} /> 在 SingleProject 組件中（即在上面的 render 屬性中列舉的那個組件），我們使用傳入的 props： function SingleProject(props) { //... } 這些 props 包含在 match.params 屬性下的參數，所以我們可以使用對象解構來重新獲取我們的 id：...

如何在React中將從父組件獲得的所有props傳遞給子組件 假設您有一個組件層次結構，在其中您從頂級組件將props傳遞給下一級組件，並且您需要將這些props原封不動地傳遞給子組件。這種情況經常發生，您真的不想這樣做： const IntermediateComponent = (props) => { return ( <ChildComponent prop1={props.prop1} prop2={props.prop2} /> ) } 相反，您想要傳遞所有的props，無論其名稱如何。 您可以使用展開運算符來實現： const IntermediateComponent = (props) => { return ( <ChildComponent {...props} /> ) } 這種語法更容易閱讀，更少出錯，並且具有靈活性，因為在更改props時您無需更改中介組件中的props名稱或添加props。

元件是介面的單一、獨立單位。它們可以擁有自己的狀態、標記和樣式。 如何使用元件 Vue 元件可以以四種主要方式定義。 讓我們用程式碼來談談。 第一種方式是： new Vue({ // 選項 }) 第二種方式是： Vue.component('component-name', { // 選項 }) 第三種方式是使用區域元件 (local components)：這些元件僅在特定元件中可存取，而在其他地方則無法使用（非常適合封裝）。 第四種方式是在 .vue 檔案中，也稱為單一檔案元件 (Single File Components)。 讓我們詳細探討前三種方式。 在建構不是單頁應用程式 (Single Page Application, SPA) 的應用程式中使用 new Vue() 或 Vue.component() 是使用 Vue 的標準方式。比如在聯絡表單或購物車等部分頁面中使用 Vue.js。或者可能 Vue 是在所有頁面中使用，但是伺服器渲染版面配置，並將 HTML 提供給客戶端，然後載入您建立的 Vue 應用程式。 在 SPA 中，由 Vue 建構 HTML 的情況下，使用單一檔案元件 (Single File Components) 是更常見的做法，因為它們更方便。 您可以通過將 Vue 控制項掛載到 DOM 元素上來實例化 Vue。如果您有一個 <div id="app"></div> 標籤，您將使用： new Vue({ el: '#app' }) 使用 Vue....

本篇介紹在Vue.js應用程式中如何讓元件彼此通訊。 Props 從子元件到父元件透過事件通訊 使用事件巴士在任意元件之間通訊 其他替代方案 Vue元件可以使用不同的方式進行通訊。 Props 第一種方式是使用props。 父元件可以透過在元件宣告時加入參數，將資料傳遞給子元件： <template> <div> <Car color="green" /> </div> </template> <script> import Car from './components/Car' export default { name: 'App', components: { Car } } </script> Props是單向的，只能由父元件傳送資料給子元件。當父元件改變prop的值時，新的值會被傳送給子元件並重新渲染。 反過來是不行的，子元件不應該去修改prop的值。 使用事件在子元件到父元件之間通訊 事件允許你從子元件向父元件進行通訊： <script> export default { name: 'Car', methods: { handleClick: function() { this.$emit('clickedSomething') } } } </script> 在父元件的template中，可以使用v-on指令來攔截這個事件： <template> <div> <Car v-on:clickedSomething="handleClickInParent" /> <!-- 或者 --> <Car @clickedSomething="handleClickInParent" /> </div> </template> <script> export default { name: 'App', methods: { handleClickInParent: function() { //....

有時候你會把prop傳遞給一個組件，然後你想要將那個prop值作為類名使用。該如何做呢？ 假設你有一個Car組件。 你想要根據一個prop來添加一個類名到組件的輸出結果中。 所以也許這個prop叫做color，你在應用的其他地方使用它的範例如下： <Car color="red"> <Car color="blue"> 在你的Car組件中，你首先需要聲明color prop： <script> export default { name: 'Car', props: { color: String } } </script> 然後你可以在模板部分使用它： <template> <div :class="color"></div> </template> 如果你想要添加一個car類，再加上根據color prop決定的類，你可以使用以下語法： <template> <div :class="['car', color]"></div> </template> 祝你編程愉快！

如何使用包裝組件並向其中添加常用的側邊欄或頂部欄 您網站上的所有頁面幾乎都是相同的，都有外觀元件和共同基礎層，您只需要更改其中的內容。 有導覽列、側邊欄和實際內容。 在 Next.js 中要如何建立這樣的系統？ 有兩種方法。一種是使用高階元件，通過創建components/Layout.js組件： export default Page => { return () => ( <div> <nav> <ul>....</ul> </nav> <main> <Page /> </main> </div> ) } 我們可以在其中匯入獨立的頁首和/或側邊欄組件，還可以添加所需的所有 CSS。 然後像這樣在每個頁面中使用它： import withLayout from '../components/Layout.js' const Page = () => <p>這是一個頁面!</p> export default withLayout(Page) 但是我發現這只適用於簡單的情況，不需要在頁面上調用getInitialProps()。 為什麼這樣做會有問題呢？ 因為getInitialProps()只在頁面組件上被呼叫。但如果我們從頁面中導出高階元件withLayout()，則不會調用Page.getInitialProps()，而會調用withLayout.getInitialProps()。 為了避免過於複雜化程式碼庫，另一種方法是使用 props： export default props => ( <div> <nav> <ul>....</ul> </nav> <main> {props.content} </main> </div> ) 現在我們在頁面中像這樣使用它： import Layout from '../components/Layout.js' const Page = () => ( <Layout content={( <p>這是一個頁面!...

在Svelte中处理单个组件的状态非常简单。 但是如何在组件之间传递状态呢？ 使用props传递状态 第一种策略是其他UI框架常见的策略，即使用props传递状态，将状态上升。 当一个组件需要与另一个组件共享数据时，可以将状态上升到组件树中的共同父级。 状态需要通过props传递，直到到达需要此状态信息的所有组件。 这是使用props完成的，我认为这是最好的技术，因为它很简单。 有关props的更多信息，请参考Svelte Props教程。 Context API 有些情况下，props并不是一个实用的方法。也许两个组件在组件树中距离太远，我们必须将状态移动到顶层组件。 在这种情况下，可以使用另一种技术，称为context API，它非常适合让多个组件与后代组件进行通信，而无需传递props。 context API由svelte软件包提供的两个函数提供：getContext和setContext。 您可以设置与键关联的上下文对象： <script> import { setContext } from 'svelte' const someObject = {} setContext('someKey', someObject) </script> 在另一个组件中，您可以使用getContext来检索分配给键的对象： <script> import { getContext } from 'svelte' const someObject = getContext('someKey') </script> 您只能在使用setContext的组件或其子代之一中使用getContext检索键。 如果要让两个位于两个不同组件树中的组件进行通信，那么我们还有另外一个工具：stores。 使用Svelte stores 当组件需要相互通信而无需传递太多props时，Svelte stores是一种非常好的工具来处理应用程序的状态。 首先，您必须从svelte/store中导入可写的writable： import { writable } from 'svelte/store' 然后使用writable()函数创建一个存储变量，将默认值作为第一个参数传递： const username = writable('Guest') 这可以放在一个单独的文件中，您可以将其导入多个组件中，例如称为store.js的文件中（它不是一个组件，因此可以是.js文件而不是.svelte）： import { writable } from 'svelte/store' export const username = writable('Guest') 加载此文件的任何其他组件现在都可以访问存储：...

學習如何在Svelte中使用props，讓具有父子關係的兩個組件彼此通信。 您可以使用import ComponentName from 'componentPath'的語法將Svelte組件引入到任何其他組件中： <script> import SignupForm from './SignupForm.svelte'; </script> 路徑相對於當前組件路徑。./表示“這個相同的文件夾”。您可以使用../回到上一級文件夾，以此類推。 一旦這樣做，您就可以在標記中使用新引入的組件，就像使用HTML標籤一樣： <SignupForm /> 通過這種方式，您正在形成兩個組件之間的父子關係：一個是導入組件，另一個是被導入組件。 通常情況下，您希望父組件將數據傳遞給子組件。 您可以使用props來實現。props的行為類似於純HTML中的屬性，它們是單向通信的形式。 在這個例子中，我們將disabled prop傳遞給它，並將JavaScript值true傳遞給它： <SignupForm disabled={true}/> 在SignupForm組件中，您需要導出disabled prop，如下所示： <script> export let disabled </script> 這是表明該prop對父組件可見的方式。 在使用組件時，您可以傳遞一個變量而不是一個值，以動態更改它： <script> import SignupForm from './SignupForm.svelte'; let disabled = true </script> <SignupForm disabled={disabled}/> 當disabled變量值變化時，子組件將以新的prop值進行更新。例如： <script> import SignupForm from './SignupForm.svelte'; let disabled = true setTimeout(() => { disabled = false }, 2000) </script> <SignupForm disabled={disabled}/>

本短教程將解釋如何通過React Router 將props傳遞給子組件。 關於如何通過React Router將props傳遞給子組件，有多種解決方案，但其中一些已經過時。 其中最簡單的方法是將props添加到Route包裝組件： const Index = props => <h1>{props.route.something}</h1> var routes = <Route path="/" something={'here'} component={Index} /> 但是這種方式需要修改props的訪問方式，從this.props改為this.props.route.*，這可能或可能不被接受。 修復這個問題的方法是使用以下方式： const Index = props => ( <h1>{props.something}</h1> ) <Route path="/" render={() => <Index something={'here'} />} />