目录
$emit——父获子,使用this.$emit(‘自定义事件名’,所需要传的值)
父组件使用子组件
父组件
<template>
<div>
<h3>关于父子组件</h3>
<div>这里是父组件</div><br/>
<!-- 使用子组件 -->
<Child></Child>
</div>
</template>
<script>
import Child from '../components/Child.vue' // 引入子组件
export default {
components: { //声明子组件
Child
},
data () {
return {
}
}
}
</script>
子组件
<template>
<div>
<h4>这里是子组件</h4>
</div>
</template>
<script>
export default {
name: 'Child',
}
</script>
运行结果
父子组件之间传参
props——子获父
1、静态参数
父组件
<Child msg="这是父组件传给子组件的静态参数"></Child>
子组件
<template>
<div>
<h4>这里是子组件</h4>
<div>{{msg}}</div>
</div>
</template>
<script>
export default {
name: 'Child',
props: { // 使用props接收参数
msg: String
}
}
</script>
运行结果
2、动态参数
父组件
<template>
<div>
<h3>关于父子组件</h3>
<div>这里是父组件</div><br/>
<!-- 使用子组件 -->
<Child msg="这是父组件传给子组件的静态参数" :msg-dynamic="dynamicMsg"></Child>
</div>
</template>
<script>
import Child from '../components/Child.vue' // 引入子组件
export default {
components: { // 声明子组件
Child
},
data () {
return {
dynamicMsg: "这是父组件传给子组件的动态参数"
}
},
}
</script>
子组件
<template>
<div>
<h4>这里是子组件</h4>
<div>{{msg}}</div>
<div>{{msgDynamic}}</div>
</div>
</template>
<script>
export default {
name: 'Child',
props: { // 使用props接收参数
msg: String,
msgDynamic: String
}
}
</script>
运行结果
$ref ——子获父
父组件
<button @click="getChildMsg">父组件传数据给子组件</button>
<Child msg="这是父组件传给子组件的静态参数" :msg-dynamic="dynamicMsg" ref="childRef"></Child>
methods: {
getChildMsg: function() {
this.$refs.childRef.childFn('这是父组件通过ref传过来的信息')
}
}
子组件
methods: {
childFn: function(msg) {
console.log(msg);
}
}
运行结果
this.$parent——子获父
在子组件中根据需要使用this.$parent.XXX获取
$emit——父获子,使用this.$emit(‘自定义事件名’,所需要传的值)
父组件
<Child msg="这是父组件传给子组件的静态参数" :msg-dynamic="dynamicMsg" ref="childRef" @childBtn="clickBtn"></Child>
clickBtn: function(msg) {
console.log(msg);
}
子组件
<button @click="childToFather">子组件把数据传给父组件</button>
childToFather: function() {
this.$emit('childBtn', '这是子组件通过$emit传过来给父组件的')
}
运行结果
this.$children——父获子
在父组件中根据需要的数据使用this.$children.XXX获得