vue的組件傳值有多種，常用的有父傳子(props)漓藕、子傳父(
emit->props)
- 父傳子(props)：如果傳的值為基礎(chǔ)類型，那么值是不可改變的享钞；如果傳的是引用類型揍诽，引用類型里面的值是可以被改變的,簡單來說傳過去的值有點類似是常量的，不可被再次賦值栗竖。
<template>
<!--parent.vue父級頁面-->
<div>
<!-- :queryParams="queryParams父級頁面data里面的變量 -->
<children :queryParams="queryParams" :msgText="msgText" />
我是父組件：<a href="javascript:;" @click="demo">點擊我查看</a>
</div>
</template>
<script>
// 子組件
import children from '@/views/salesManagement/children.vue' //子組件所在路徑
export default {
components: {
children,
}, //初始化組件
data() {
return {
queryParams: {
name: '小明',
sex: 18,
age: '男',
},
msgText: '我是父級頁面?zhèn)鬟f的值',
}
},
methods: {
demo() {
console.log(this.queryParams)
},
},
}
</script>
<template>
<!-- children.vue 子級頁面 -->
<div>我是子組件：<a href="javascript:;" @click="demo">點擊添加</a></div>
</template>
<script>
export default {
props: {
queryParams: Object, //父組件傳過來的變量名稱暑脆，指定類型、如果類型不對會報錯
msgText: String,
},
data() {
return {}
},
mounted() {
//跟訪問data里面的變量一樣狐肢，this可以拿到
console.log(this.queryParams, this.msgText)
},
methods: {
demo() {
this.queryParams.value = '我是子組件添吗，我要添加一個值進(jìn)來'
//this.msgText = '' //報錯，不可修改
console.log(this.queryParams, this.msgText)
},
},
}
</script>
- 子傳父(
emit傳遞一個方法過去处坪；方法有N個形參根资，第一個參數(shù)：父組件接收的方法名稱；第二個參數(shù)：類型不限同窘；第N個后面用逗號分隔
<template>
<!-- children.vue 子級頁面 -->
<div>
<!-- 點擊觸發(fā)子組件傳值 -->
<a href="javascript:;" @click="onChange">點我傳遞</a>
</div>
</template>
<script>
export default {
props: {
queryParams: Object, //父組件傳過來的變量名稱玄帕，指定類型、如果類型不對會報錯
},
data() {
return {
msg: '早上好想邦，現(xiàn)在是2021年6月4號',
text: 'Hello China!',
}
},
mounted() {},
methods: {
onChange() {
//傳過去的的變量 多個參數(shù)值：this.$emit('onChange', this.msg,this.text)裤纹、也可用對象包裹：this.$emit('onChange', {msg:this.msg,text:this.text})
this.$emit('onChange', this.msg)
},
},
}
</script>
<template>
<!--parent.vue父級頁面-->
<div>
<!-- 子組件傳遞的方法名稱onChange -->
<children @onChange="onChange" />
</div>
</template>
<script>
// 子組件
import children from '@/views/salesManagement/children.vue' //子組件所在路徑
export default {
components: {
children,
}, //初始化組件
data() {
return {
queryParams: {},
}
},
mounted() {},
methods: {
onChange(val) {
console.log(val) //子組件傳遞過來的值，多個形參用逗號分隔
},
},
}
</script>
- 兄弟傳值($emit->props):從子組件傳遞值到父組件丧没；在從父組件傳遞到另一個子組件鹰椒。可達(dá)到兄弟傳值的效果呕童，兄弟傳值只講邏輯具體就不演示了漆际！
總結(jié)：組件之間的傳值不復(fù)雜，初學(xué)者可能覺得有點繞夺饲；看著有點蒙奸汇；多聯(lián)系摸索一下，也是很快就熟練了往声。
