vue组件之间的传值
slot标签:想向封装好结构的组件中插入内容,需要借助<slot></slot>在组件之中进行关联:如模板中:<slot name='txt'></slot>组件调用中:<p slot='txt'></p>注:如果只有slot上面每一定义name属性,则只能有一个slot<div class='box'><com><p slot='txt'></p>
·
slot标签:
想向封装好结构的组件中插入内容,需要借助<slot></slot>
在组件之中进行关联:如
模板中:<slot name='txt'></slot>
组件调用中:<p slot='txt'></p>
注:如果只有slot上面每一定义name属性,则只能有一个slot
<div class='box'>
<com>
<p slot='txt'></p>
</com>
</div>
<template id="c">
<div>
<slot name="txt"></slot>
</div>
</template>
Vue.component('com',{
template:"#c"
})
父组件向子组件传值:props
父组件:
<template>
<child :parent-msg='a'></child>
</template>
子组件:
child:{
template:‘#chi’
props:['parentMsg']
}
子组件向父组件的传值:
vue只运行数据的单选传递,在子组件向父组件的传值中,需要事件触发
子组件:
<template>
<div @click="up"></div>
</template>
methods:{
up(){
this.$emit('fn','msg') // 主动触发fn方法,msg是需要传递的数据
}
}
父组件:
<div>
<child @fn="getval"></child>
</div>
methods:{
getval(msg){ // msg接收到的数据
this.msg=msg
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)