1、父組件向子組件進(jìn)行傳值:
我們提供的服務(wù)有:成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、武威ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的武威網(wǎng)站制作公司
父組件:
<template> <div> 父組件: <input type="text" v-model="name"> <br> <br> <!-- 引入子組件 --> <child :inputName="name"></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } } } </script>
子組件:
<template> <div> 子組件: <span>{{inputName}}</span> </div> </template> <script> export default { // 接受父組件的值 props: { inputName: String, required: true } } </script>
2.子組件向父組件傳值
子組件:
<template> <div> 子組件: <span>{{childValue}}</span> <!-- 定義一個(gè)子組件傳值的方法 --> <input type="button" value="點(diǎn)擊觸發(fā)" @click="childClick"> </div> </template> <script> export default { data () { return { childValue: '我是子組件的數(shù)據(jù)' } }, methods: { childClick () { // childByValue是在父組件on監(jiān)聽的方法 // 第二個(gè)參數(shù)this.childValue是需要傳的值 this.$emit('childByValue', this.childValue) } } } </script>
父組件:
<template> <div> 父組件: <span>{{name}}</span> <br> <br> <!-- 引入子組件 定義一個(gè)on的方法監(jiān)聽子組件的狀態(tài)--> <child v-on:childByValue="childByValue"></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childByValue: function (childValue) { // childValue就是子組件傳過來的值 this.name = childValue } } } </script>
3.非父子組件進(jìn)行傳值。(非父子組件之間傳值,需要定義個(gè)公共的公共實(shí)例文件bus.js,作為中間倉庫來傳值,不然路由組件之間達(dá)不到傳值的效果。)
公共bus.js
//bus.js import Vue from 'vue' export default new Vue()
組件A:
<template> <div> A組件: <span>{{elementValue}}</span> <input type="button" value="點(diǎn)擊觸發(fā)" @click="elementByValue"> </div> </template> <script> // 引入公共的bug,來做為中間傳達(dá)的工具 import Bus from './bus.js' export default { data () { return { elementValue: 4 } }, methods: { elementByValue: function () { Bus.$emit('val', this.elementValue) } } } </script>
組件B:
<template> <div> B組件: <input type="button" value="點(diǎn)擊觸發(fā)" @click="getData"> <span>{{name}}</span> </div> </template> <script> import Bus from './bus.js' export default { data () { return { name: 0 } }, mounted: function () { var vm = this // 用$on事件來接收參數(shù) Bus.$on('val', (data) => { console.log(data) vm.name = data }) }, methods: { getData: function () { this.name++ } } } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前文章:Vue三種常用傳值示例(父?jìng)髯?、子傳父、非父?
網(wǎng)址分享:http://muchs.cn/article18/pihedp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、營銷型網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)