我有一个包含幻灯片列表的滑块元素和一个显示悬停幻灯片的img,如下所示.我在自定义幻灯片(子)和自定义滑块(父)之间绑定currentImage
案例I
定制slider.html
<template>
<div>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
</div>
<img src="{{currentImage}}">
</template>
当我像这样使用时它完美地工作.
的index.html
<body>
<custom-slider>
</custom-slider>
</body>
但是,当我更改索引和自定义滑块html,如下所示,它不起作用.悬停的自定义幻灯片未显示在img标记中.它没有得到更新.
案例II
的index.html
<body>
<custom-slider>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
</custom-slider>
</body>
定制slider.html
<template>
<div>
<content select="custom-slide,[custom-slide]"></content>
</div>
<img src="{{currentImage}}"></custom-slide>
</template>
控制台中也没有错误.
我有一个名为currentImage的属性,用于自定义幻灯片和自定义滑块,如图所示,甚至我使用了notify：true属性.
currentImage: {
type: String,value: 'some_image_url_by_default',notify: true
}
在自定义幻灯片上的鼠标悬停我有一个事件是更新自定义滑块中的customImage.图片网址在自定义幻灯片中更新,但不在自定义滑块中更新.只有当我使用我的问题的第一个案例代码时,它才会更新.
UPDATE
当我直接在任何Custom元素的模板中绑定时,绑定工作正常.但是当我间接地约束时,使用< content>标签然后绑定不起作用.例如,
<parent-elem></parent-elem> // custom element
父元素模板
<dom-module id="parent-elem">
<template>
<div>{{name}}</div>
</template>
// Assume here in script I have a property name
</dom-module>
像上面一样,它正在发挥作用.
但是在上面的代码中,如果我替换< div> {{name}}< / div>与< content>< / content>并改变
<parent-elem>
<div>{{name}}</div>
</parent-elem> // custom element
然后绑定不起作用.为什么？那么具有< content>的用途是什么？标签？
编辑
