校園的晚霞

前言

學vue必須要會的就是組件這玩意啦，不然可能就約等于白學。

我自己前期完成老師布置的任務，不瞞你說，交上去，直接被罵，原因就是我一個組件沒抽😂（一邊學，一邊敲，沒想那么多，只想著實現）。

一個小小頁面，1163行（捂臉）。

然后就下定決心來好好整vue組件，其實我覺得還蠻好玩的。接下來就讓我們看看組件必會的 props

了解這個之前一定得懂點組件基礎哈。

介紹

vue.js文檔在props這節真就是直接上手，把我當大佬

組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。父組件的數據需要通過 prop 才能下發到子組件中。

也就是說props是子組件訪問父組件數據的唯一接口。即我們想要動態的傳遞數據給子組件的話，子組件中必須有props才行。

如果子組件想要渲染父組件的元素，那么就必須要在prop中聲明一個變量才行,這個變量就可以引用父元素的數據，然后就可以進行渲染。

基本用法

我們寫了一個小組件demo，然后在App中引用

<template><div><p>子組件demo</p><h1>{{message}}</h1></div> </template> <script> export default {props: ['message']} </script>

App里的

<template><div class="todo-container"><Demo ></Demo></div> </template> <script> import Demo from './components/Demo' export default {components: {Demo} } </script>

初始化效果

那行<h1>{{message}}</h1>并沒有展示出來。

子組件雖然已經接收，但是我們要如何在App組件中傳值勒？

<!-- :message 對應的是子組件 prop 中接收變量的名稱 "message" 對應的父組件中data中定義的數據 --> <Demo :message="message"></Demo> data () {return {message: 'hello'} }

接下來我們再看看子組件有沒有被渲染

已經是渲染成功啦。

另外在子組件接收props時，我上述的方式是最簡單的，理論上接收時應當指定類型，因為JavaScript是一門弱語言。

props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor }

這就是最基本的父組件傳遞給子組件數據的方式啦。

Props 的單向性（重點）

注意：當父組件的屬性值變化，子組件也會立馬隨之變化，但是反過來并不會如此。

另外，不要嘗試在子組件內部改變Prop接收到的值，這么做當值為對象時，可以成功，但是這是違反規則的，控制臺上vue也會給出警告

但是我們難免會有要在子組件修改值的時候，那么有什么方法勒？

1、第一種：

父元素通過prop傳遞了一個初始值，而我們在子組件中希望之后都把它當作一個本地的prop數據來使用。這種情況我們通常會在子組件中的data區域定義一個變量并將值賦給它。

props: ['message'], data: function () {return {msg: this.message} }

2、第二種：計算屬性

官方例子：

props: ['size'], computed: {normalizedSize: function () {return this.size.trim().toLowerCase()} }

注意：在 JavaScript 中對象和數組是通過引用傳入的，所以對于一個數組或對象類型的 prop 來說，在子組件中改變變更這個對象或數組本身將會影響到父組件的狀態。這是不被建議的

如下列這種即是違反規則的：

有錯的不是v-model哈，而是咱們沒把 prop 用好哈。

小結

通過 prop 父組件可以傳遞數據給子組件，使得子組件可以做到被多次復用。

剩下的文章，咱們就是想想如何讓子組件返回數據給父組件，父子組件、祖孫組件、兄弟組件是如何通信的啦，又是如何給子組件綁定事件的啦。

持續更新中，我們一起進步。

后語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」关于 Vue中的 props的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。