Vue 父子组件使用props 传递参数
自定义了子组件,在父组件中引用了子组件,如果要在父组件中传递参数(数据)给子组件,如何操作呢?、1. 自定义子组件<template><div class="container"><div class="top"><p class="p_left">{{titleLeft}}</p>&...
·
自定义了子组件,在父组件中引用了子组件,如果要在父组件中传递参数(数据)给子组件,如何操作呢?、
1. 自定义子组件
<template>
<div class="container">
<div class="top">
<p class="p_left">{{titleLeft}}</p>
<p class="p_right" @click="clickAction">{{titleRight}}</p>
</div>
<div class="line"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props:['titleLeft','titleRight'],
data() {
return {
};
},
methods: {
clickAction(){
this.$emit('clickHeadAction',this.titleRight);
}
}
};
</script>
2.父组件中调用子组件
<div class="message">
<ActivityHead :titleLeft="msgLeft" :titleRight="msgRight" @clickHeadAction="clickChild"></ActivityHead>
</div>
说明:
在父组件中最核心的部分是:[:titleLeft="msgLeft" :titleRight="msgRight"] 通过冒号+子组件参数的形式,将数据传递给子组件。
更多推荐
已为社区贡献2条内容
所有评论(0)