兄弟组件间传值:https://blog.csdn.net/qq_41956139/article/details/104598942
一览图
一、父组件向子组件传值
1、静态传值
(1)在父组件中
在子组件占位符中直接写:参数名=“参数值”
<template>
<div class="father">
<h1>This is Father</h1>
<!-- (静态)父传子:字符串 -->
<Child msg="msg from father."/>
</div>
</template>
<script>
// 引入子组件,必须
import Child from '@/components/Child.vue'
export default {
data() {
return{}
},
components: {
Child
}
}
</script>
(2)在子组件中
<template>
<div class="child">
<h1>This is Child</h1>
<h1>来自父组件的数据:{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: {
// 来自父组件,类型为 String
msg: String
},
data() {
return{}
}
}
</script>
2、动态传值
(1)在父组件中
使用 v-bind(语法糖 :)动态绑定数据,格式:v-bind:参数名=“变量名” 或 :参数名=“变量名”
<template>
<div class="child">
<h1>This is Child</h1>
<!-- (动态)父传子:变量 -->
<Child v-bind:pmessage="message" :pnum="num"></Child>
</div>
</template>
<script>
// 引入子组件,必须
import Child from '@/components/Child.vue'
export default {
data() {
return{
message: ['msg1','msg2','msg3'],
num: 50
}
},
components: {
Child
}
}
</script>
(2)在子组件中
<template>
<div class="child">
<h1>This is Child</h1>
<h2 v-for="item in pmessage">{{ item }}</h2>
<h2>{{ pnum }}</h2>
</div>
</template>
<script>
export default {
props: {
pmessage: Array,
pnum: Number
},
data() {
return{}
}
}
</script>
二、子组件向父组件传值
(1)在子组件中
<template>
<div class="child">
<h1>This is Child</h1>
<button @click="toParent">toParent</button>
</div>
</template>
<script>
export default {
data() {
return{
cmessage: 'cmessage from child'
}
},
methods: {
toParent() {
console.log('child点击了按钮')
// 键值对
this.$emit("cmsg", this.cmessage)
}
}
}
</script>
(2)在父组件中
<template>
<div class="father">
<!-- v-on: 语法糖@,监听子组件 -->
<Child @cmsg="fromChild"></Child>
<h2>{{cmsg}}</h2>
</div>
</template>
<script>
// 引入子组件,必须
import Child from '@/components/Child.vue'
export default {
data() {
return{
cmsg: ''
}
},
methods: {
fromChild(cmsg) {
console.log("father接收到了来自child的数据:", cmsg)
this.cmsg = cmsg
}
},
components: {
Child
}
}
</script>
三、在父组件中通过点击事件直接控制子组件
(1)在父组件中
<template>
<div class="father">
<!-- 通过 ref 属性 -->
<Child ref="mychild"></Child>
<button @click="clickParent">控制子组件</button>
</div>
</template>
<script>
// 引入子组件,必须
import Child from '@/components/Child.vue'
export default {
data() {
return{
cmsg: ''
}
},
methods: {
clickParent() {
this.$refs.mychild.parentHandleclick("我在控制子组件");
}
},
components: {
Child
}
}
</script>
(2)在子组件中
<template>
<div class="child">
<h1>This is Child</h1>
<h2>{{controlByFather}}</h2>
</div>
</template>
<script>
export default {
data() {
return{
controlByFather: ''
}
},
methods: {
parentHandleclick(val) {
console.log("受控于父组件显示:" + val)
}
}
}
</script>
鸣谢 参考:
[1] 作者:shengnan_2017,网站:博客园,链接:https://www.cnblogs.com/shengnan-2017/p/10419050.html
[2] 作者:672530440,网站:博客园,链接:https://www.cnblogs.com/yaowen/p/10417562.html