a标签传值到另一个页面_Vue组件传值与通信集合
Vue的組件化給前端開發(fā)帶來(lái)極大的便利，這種依賴數(shù)據(jù)來(lái)控制Dom的模式，區(qū)別于以前的開發(fā)控制Dom的開發(fā)理念，這也導(dǎo)致了一種情況，在Vue中是單向數(shù)據(jù)流的，意味著只能從父組件向子組件傳值，不允許子組件向父組件傳值。
這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。 ---vue教程然而當(dāng)我們把組件拆分到足夠細(xì)的時(shí)候，子組件控制父組件的數(shù)據(jù)，或者兄弟組件之間的傳值就變得尤為突出，這里我將總結(jié)各式各樣的傳值，函數(shù)調(diào)用的方法。
父組件中的通信方法
閱讀完官方文檔后，我們一定會(huì)對(duì)props有強(qiáng)烈的印象，然而在父組件中可不止有這種通信的方式。
props
- 命名規(guī)范
HTML 中的特性名是大小寫不敏感的，所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線分隔命名) 命名：
- 傳遞靜態(tài)或動(dòng)態(tài) Prop 假如你想傳字符串給子組件只需要給便簽添加屬性就可以了
當(dāng)然那些非字符串的類型就直接依賴于v-bind進(jìn)行傳值（Number、Boolean、Array...）
<!-- 動(dòng)態(tài)賦予一個(gè)變量的值 --> <blog-post v-bind:title="post.title"></blog-post><!-- 動(dòng)態(tài)賦予一個(gè)復(fù)雜表達(dá)式的值 --> <blog-postv-bind:title="post.title + ' by ' + post.author.name" ></blog-post>- 子組件接收
常見的就是聲明式接收： props: [...] 數(shù)組形式
但官方更推薦對(duì)象形式的接收，至少為每個(gè)prop指定類型
Vue.component('my-component', {props: {// 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證)propA: Number,// 多個(gè)可能的類型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 帶有默認(rèn)值的數(shù)字propD: {type: Number,default: 100},// 帶有默認(rèn)值的對(duì)象propE: {type: Object,// 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取default: function () {return { message: 'hello' }}},// 自定義驗(yàn)證函數(shù)propF: {validator: function (value) {// 這個(gè)值必須匹配下列字符串中的一個(gè)return ['success', 'warning', 'danger'].indexOf(value) !== -1}}} })type 可以是下列原生構(gòu)造函數(shù)中的一個(gè)：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
使用上我們除了this.prop外還可以使vm.$props（當(dāng)前組件接收到的 props 對(duì)象。Vue 實(shí)例代理了對(duì)其 props 對(duì)象屬性的訪問(wèn)。）
- 禁用特性繼承
如果你不希望組件的根元素繼承特性，這尤其適合配合實(shí)例的 $attrs 屬性使用,你可以在組件的選項(xiàng)中設(shè)置 :
當(dāng)然還有非聲明式的接收 $attrs （2.4.0 新增）：
包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。<base-input label="姓名" class="username-input" placeholder="Enter your username" data-date-picker="activated" ></base-input> Vue.component("base-input", {inheritAttrs: false, //此處設(shè)置禁用繼承特性props: ["label"],template: `<label>{{label}}{{$attrs.placeholder}} //這里不用聲明props可以直接調(diào)用{{$attrs["data-date-picker"]}}<input v-bind="$attrs"/></label>`,mounted: function() {console.log(this.$attrs);} })provide/inject
provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中。// 父級(jí)組件提供 'foo' var Provider = {provide: {foo: 'bar'},// ... }// 子組件注入 'foo' var Child = {inject: ['foo'],created () {console.log(this.foo) // => "bar"}// ... }提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的。更多的用法是用來(lái)注入方法的：
// 父級(jí)組件提供 'foo' var Provider = {provide: {foo: this.fn},methods:{fn(){console.log('bar')}}// ... }// 子組件注入 'foo' var Child = {inject: ['foo'],created () {this.foo(); // => "bar"}// ... }vm.$children
通過(guò)Vue實(shí)例代理的$children獲取其子組件的值，為一個(gè)類數(shù)組，你可以在控制臺(tái)中打印出來(lái)，里面有子組件中的一切屬性。
vm.$slots
插槽的使用更多在官方文檔中查看，這里顯示基礎(chǔ)的使用方法：
<navigation-link url="/profile">Your Profile </navigation-link>然后你在 的模板中可能會(huì)寫為：
<av-bind:href="url"class="nav-link" ><slot></slot> </a>除了用標(biāo)簽獲取傳遞的數(shù)據(jù)，我更喜歡用$slots處理，比如在這個(gè)輸入框中，你既要設(shè)定lable又要設(shè)定placeholder，然而它們兩其實(shí)是同一個(gè)數(shù)據(jù)，這時(shí)候我們可以這樣：
<inputBox :readonly='readonly' v-model='item.contactName'>聯(lián)系人</inputBox> <inputBox :readonly='readonly' v-model='item.mobile'>電話</inputBox> var Component = {props: {readonly: {default: false},type: {default: 'text'},value: [String, Number],maxlength: {default: 20}},data() {return {inputValue: this.value}},watch: {value(newValue) {this.inputValue = newValue},inputValue(newValue) {this.$emit('input', newValue)}},template: `<div class='input'><cube-input v-model.trim="inputValue" :placeholder="'請(qǐng)輸入' + this.$slots.default[0].text" :readonly="readonly" :type="type" :maxlength="maxlength"><template v-slot:prepend><slot></slot></template></cube-input></div>`};其他的為ui框架的組件不用在意，重要的是this.$slots.default[0].text這一段對(duì)$slots的應(yīng)用。
小結(jié)
通過(guò)上面的四種方法，我們可以看出，它們都是可以完成值得傳遞或者獲取的，除了$slots不能傳遞方法函數(shù)外，其他三種均可完成。
子組件中的通信方法
首先我們先要理解子組件傳遞的原理，下面這張圖大家在很多的地方都看過(guò)了，實(shí)際上就是父組件通過(guò)prop給子組件下發(fā)數(shù)據(jù)，子組件通過(guò)事件給父組件發(fā)送信息，而使用的工具為：
$on(evntName)監(jiān)聽事件； $emit(eventName,optionalPayload)觸發(fā)事件； 接下來(lái)的方法都是對(duì)這個(gè)原理實(shí)現(xiàn)的變形
v-on / $emit
首先我們來(lái)實(shí)現(xiàn)一個(gè)單向傳遞的例子：
//父組件 <template><child @childHandler="parentHandle"></child> </template><script> export default {data: {message: ''},methods: {parentHandle(send) {this.message = send;}} } </script> //子組件 <template><button @cilck="sendHandle"></button> </template> <script> export default {date: {news:"from children"},methods: {sendHandle() {this.$emit('childHandler',this.news);}} } </script>上面的過(guò)程我就不再描述一遍了，你們自己看代碼理解理解，這樣我們就實(shí)現(xiàn)了由子組件傳遞數(shù)據(jù)到父組件。但在更復(fù)雜的場(chǎng)景時(shí)，我們不僅需要修改父組件的值，還需要通過(guò)父組件的值影響到子組件的渲染，也就是實(shí)現(xiàn)子父組件的數(shù)據(jù)雙向綁定。
更多的場(chǎng)景下我們希望其是自動(dòng)觸發(fā)數(shù)據(jù)交互的，這時(shí)我們需要用到watch，現(xiàn)在我們對(duì)上面的代碼進(jìn)行修改一下。
//父組件 <template><child @childHandler="parentHandle" :status="status" :name="name"><button @cilck="emptyHandle">清空</button> </child> </template><script> export default {data: {status:'男',name:'Max.Law'},methods: {parentHandle(send) {this.child.status = send;}，emptyHandle(){status = '';}} } </script> //子組件 <template><p><span>姓名：</span>{{name}}</p><p><span>性別：</span>{{childStatus}}</p><button @cilck="sendHandle('男')">男</button><button @cilck="sendHandle('女')">女</button> </template> <script> export default {props: {status: [String, Number],name: [String, Number]},date: {childStatus:this.status},methods: {sendHandle(data) {this.childStatus = data},watch: {status(newValue) {this.childStatus = newValue},childStatus(newValue) {this.$emit('childHandler', newValue)}}, } </script>這里實(shí)現(xiàn)的是在子組件的性別狀態(tài)繼承于父組件，子組件修改性別的狀態(tài)的同時(shí)改變父組件的數(shù)據(jù)以便父組件使用。
我們?cè)谑褂胿ue的過(guò)程中很清楚，假如子組件直接寫{{status}}來(lái)繼承父組件的值，在修改狀態(tài)的時(shí)候vue會(huì)提示不建議直接修改父組件的值來(lái)改變子組件（vue中一個(gè)重要邏輯，當(dāng)前組件只處理當(dāng)前組件的數(shù)據(jù)），所以我們使用childStatus來(lái)接收父組件的值。
那我們?nèi)绾巫龅阶咏M件的改變能影響父組件，父組件更新值時(shí)又能影響子組件呢？這時(shí)候重點(diǎn)都在這個(gè)watch上：
當(dāng)status改變時(shí)則改變childStatus的值， 當(dāng)childStatus改變時(shí)，用上面的方法與父組件通信，改變父組件的值
這樣我們就完成子父組件的數(shù)據(jù)雙向綁定，整個(gè)過(guò)程為： 1. 給子組件幫一個(gè)通信方法 2. 綁定一個(gè)傳值對(duì)象 3. 監(jiān)控?cái)?shù)據(jù)的變化
看到這里有沒(méi)有熟悉的感覺(jué)，是不是跟 v-modle 很像，vue提供的雙向綁定的指令，而 v-modle 的本質(zhì)就是綁定了一個(gè)input的方法，和一個(gè)value值，這時(shí)候我們就能把上面的雙向數(shù)據(jù)綁定的方法簡(jiǎn)化了（v-modle是在本組件內(nèi)實(shí)現(xiàn)雙向綁定，并沒(méi)有做到子父組件雙向綁定）
v-model/vm.$emit
還記得我上面講$slot的代碼嗎？這里我們簡(jiǎn)化一下：
//父組件 <template><inputBox :readonly='readonly' v-model='brand'>設(shè)備品牌</inputBox> </template><script> export default {data: {brand:'默認(rèn)'} } </script> //子組件 <template><div><h1><slot></slot></h1><input v-model="inputValue"></input></div> </template><script> export default {props: {value: [String, Number]},data() {inputValue: this.value},watch: {value(newValue) {this.inputValue = newValue},inputValue(newValue) {this.$emit('input', newValue)}} } </script>這時(shí)候，我們不僅可以修改子組件中的輸入框值，還是能同時(shí)改變父組件的值，這在做上傳表單的時(shí)候尤為重要，保證我們父組件一直都是獲取用戶最新輸入的值。（這個(gè)在我做微信公眾號(hào)一個(gè)表單項(xiàng)目時(shí)候突發(fā)奇想的實(shí)現(xiàn)）
this.$parent
這個(gè)是vue提供的api，使用也很簡(jiǎn)單，場(chǎng)景一般適合在父組件寫入多個(gè)子組件需要調(diào)用的公共方法，比provide/inject占用性能要低，也更明確作用域。
只需要在父組件注冊(cè)方法，在子組件這樣使用： this.$parent.parentFn(); 這里要注意層級(jí)，也許是孫組件，或者從孫組件，可以這樣調(diào)用： this.$parent.$parent.grandfatherFn(); 只需要打印出當(dāng)前的this.$parent查看，確定層級(jí)即可。
好了，上面就是 《 Vue組件傳值與通信集合 》的全部?jī)?nèi)容了，希望能夠?qū)δ阌兴鶐椭?#xff0c;如有疑問(wèn)歡迎留言~
總結(jié)
以上是生活随笔為你收集整理的a标签传值到另一个页面_Vue组件传值与通信集合的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 广升麻的功效与作用、禁忌和食用方法
- 下一篇： html5倒计时秒杀怎么做,vue 设