发新贴  快速回复

请教在组件插槽插入内容后事件怎么调用?没调用时可以正常调用

  蛮牛
2018-09-01 12:34
附件下载:
 
 
zmouse

你可以使用插槽作用域:https://cn.vuejs.org/v2/guide/components-slots.html

首先在组件模板中:

<slot name="modal-footer" :okHandle="okHandle">
    <input type="button" value="确定" @click="okHandle" />
    <input type="reset" value="重置" @click="chong" />
    <input type="button" value="取消"@click="cancelHandle" />
</slot>   

然后在具体调用的时候:

<div slot="modal-footer" slot-scope="fns">
    <input type="button" value="确定" @click="fns.okHandle" />
    <input type="reset" value="重置" />
    <input type="button" value="返回" />
 </div>
 <!-- 如果把这里内容插入组件插槽里,事件怎么触发???? -->

 

2018-09-01 15:37  回复本帖
 
蛮牛

2018-09-01 16:15  回复本帖
 
蛮牛

zmouse 2018-09-01 15:37发表的内容:

你可以使用插槽作用域:https://cn.vuejs.org/v2/guide/components-slots.html

首先在组件模板中:

<slot name="modal-footer" :okHandle="okHandle">
    <input type="button" value="确定" @click="okHandle" />
    <input type="reset" value="重置" @click="chong" />
    <input type="button" value="取消"@click="cancelHandle" />
</slot>   

然后在具体调用的时候:

<div slot="modal-footer" slot-scope="fns">
    <input type="button" value="确定" @click="fns.okHandle" />
    <input type="reset" value="重置" />
    <input type="button" value="返回" />
 </div>
 <!-- 如果把这里内容插入组件插槽里,事件怎么触发???? -->

 

还是没看懂,请老师赐教

2018-09-01 16:44  回复本帖
 
zmouse

你需要在插槽里面写:slot-scope="fns",这就是接收来自包含父级组件的数据的,fns是自己起的变量名称,类似组件内部的 props,也就是:

- 传递给组件内部的数据,组件内部通过 props 接收

- 传递给组件包含的子组件(插槽),通过 slot-scope 接收

2018-09-03 10:29  回复本帖
 
蛮牛

zmouse 2018-09-03 10:29发表的内容:

你需要在插槽里面写:slot-scope="fns",这就是接收来自包含父级组件的数据的,fns是自己起的变量名称,类似组件内部的 props,也就是:

- 传递给组件内部的数据,组件内部通过 props 接收

- 传递给组件包含的子组件(插槽),通过 slot-scope 接收

绑定了找不到父组件的事件函数,能想到的办法,百度都试了,是在不理解做不出来
2018-09-03 20:13  回复本帖
 
蛮牛

2018-09-03 20:20  回复本帖
 
蛮牛

蛮牛 2018-09-03 20:13发表的内容:

绑定了找不到父组件的事件函数,能想到的办法,百度都试了,是在不理解做不出来
我百度自己试的结果还是不理解,做不出来,下图就是我写的,请老师赐教,谢谢
2018-09-03 20:22  回复本帖
 
zmouse

你写反了,组件模板里面是传:<slot name='moc' :a='okHandle' :b="cancelHandle">

然后在组件调用中:<div slot="moc" slot-scope="fns">,这个fns里面就存了上面传的 a和b,使用的时候:fns.a和fns.b

你把这两个的关系弄反了

2018-09-04 12:39  回复本帖
 
蛮牛

zmouse 2018-09-04 12:39发表的内容:

你写反了,组件模板里面是传:<slot name='moc' :a='okHandle' :b="cancelHandle">

然后在组件调用中:<div slot="moc" slot-scope="fns">,这个fns里面就存了上面传的 a和b,使用的时候:fns.a和fns.b

你把这两个的关系弄反了

<div slot="moc" slot-scope="fns">
<input type="button" value="可以" @click="fns.a" />//要替换的内容里的事件函数怎么调用事件名
<input type="button" value="行不行" />
<input type="button" value="重来" />
</div>
<slot name='moc' :a='okHandle' >//模板里用this.$emit触发父组件的自定义事件怎么触发<input type="button" value="确定" @click="okHandle" />
<input type="button" value="重置" />
<input type="button" value="取消" />
</slot>
2018-09-04 18:18  回复本帖
登录 后才可以发表回复