1.父传子
prop
- 属性绑定, 子组件通过
prop
属性childrenData
可以接受到父组件中绑定的值:childrenData
<!-- 父组件 hsz—test -->
<template>
<view>
<view class="">
<view class="">
父组件fatherData:{{fatherData}}
</view>
<!-- 子组件 -->
<hsz-test-component :childrenData="fatherData"></hsz-test-component>
</view>
</view>
</template>
<script>
export default {
data() {
return {
fatherData: 'hszz-fatherData',
}
},
}
</script>
<!-- 子组件 hsz-test-component -->
<template>
<view>
<view class="">
<view>子组件childrenData: {{childrenData}}</view>
</view>
</view>
</template>
<script>
export default {
name: "hsz-test-component",
props: {
childrenData: {
type: String, // 类型
default: '', // 默认值
}
},
}
</script>
2.子传父
this.$emit(funcName, val)
- 事件传递,funcName:事件名, val:值
<!-- 父组件 hsz—test -->
<template>
<view>
<view class="">
<!-- 绑定子组件事件,接收子组件值 -->
<hsz-test-component @handleChange="changeName"></hsz-test-component>
<view class="">
{{name}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name:'',
}
},
methods: {
changeName(name) { // name形参是子组件中传入的值
this.name = name
}
}
}
</script>
<!-- 子组件 hsz-test-component -->
<template>
<view>
<!-- 子组件设置 -->
<view class="">
子组件
</view>
</view>
</template>
<script>
export default {
name: "hsz-test-component",
data() {
return {
name: 'hszz'
};
},
mounted() {
// 通过事件传递给父组件
this.$emit('handleChange', '我是子组件传给父组件的值:' + this.name)
}
}
</script>
image.png
3.
$refs
$children
$parent
- 父组件访问子组件
-
this.$children[0]
- this.$children是一个数组,包含使用子组件,可通过索引选择组件
-
this.$refs.comhsz
-
- 子组件访问父组件
- this.$parent
<!-- 父组件 hsz—test -->
<template>
<view>
<view class="">
<view class="">
父组件 {{name}}
</view>
<hsz-test-component ref="comhsz"></hsz-test-component>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
}
},
methods: {
changeName() {
this.name = '子组件调用父组件方法 hszz-c'
},
// 父组件调用子组件两种方法
// this.$children
fatherChange() {
this.$children[0].changeName()
},
// this.$ref 需要在子组件设置ref="comhsz"
fatherChangeRef() {
this.$refs.comhsz.changeName()
}
},
mounted() {
//this.fatherChange()
this.fatherChangeRef()
}
}
</script>
<!-- 子组件 hsz-test-component -->
<template>
<view>
<!-- 子组件设置 -->
<view class="">
子组件 {{cName}}
</view>
</view>
</template>
<script>
export default {
name: "hsz-test-component",
data() {
return {
cName: ''
};
},
methods: {
changeName() {
this.cName = '父组件调用子组件方法 hszz-c'
},
// 子组件调用父组件方法
childrenChange() {
this.$parent.changeName()
}
},
mounted() {
this.childrenChange()
}
}
</script>
image.png
网友评论