vue的组件传值有多种，常用的有父传子(props)、子传父(
emit->props)
- 父传子(props)：如果传的值为基础类型，那么值是不可改变的；如果传的是引用类型，引用类型里面的值是可以被改变的,简单来说传过去的值有点类似是常量的，不可被再次赋值。
<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: '我是父级页面传递的值',
}
},
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 = '我是子组件，我要添加一个值进来'
//this.msgText = '' //报错，不可修改
console.log(this.queryParams, this.msgText)
},
},
}
</script>
- 子传父(
emit传递一个方法过去；方法有N个形参，第一个参数：父组件接收的方法名称；第二个参数：类型不限；第N个后面用逗号分隔
<template>
<!-- children.vue 子级页面 -->
<div>
<!-- 点击触发子组件传值 -->
<a href="javascript:;" @click="onChange">点我传递</a>
</div>
</template>
<script>
export default {
props: {
queryParams: Object, //父组件传过来的变量名称，指定类型、如果类型不对会报错
},
data() {
return {
msg: '早上好，现在是2021年6月4号',
text: 'Hello China!',
}
},
mounted() {},
methods: {
onChange() {
//传过去的的变量 多个参数值：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):从子组件传递值到父组件；在从父组件传递到另一个子组件。可达到兄弟传值的效果，兄弟传值只讲逻辑具体就不演示了！
总结：组件之间的传值不复杂，初学者可能觉得有点绕；看着有点蒙；多联系摸索一下，也是很快就熟练了。
