Question

如何在不更改v-b-tooltip.hover html的情况下向myInput和myButton添加myDiv指令？我一直试图在render函数中访问它们，但是使用api并不明显。

已更新：添加了第二个组件

Vue.component('other-component', {
  template: "<div><b-form-input title='myInput'/><b-button title='myButton'>Button</b-button></div>"
})

var MyComponent = {
  render: function(createElement) {
    console.log(this.$slots.default.children);
    return createElement("div", this.$slots.default)
  }
}

new Vue({
  el: "#app",
  components: {
    MyComponent
  }
})

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <my-component>
    <other-component />
  </my-component>
</div>

Answer 1

您可以修改插槽vnode来实现此目的。

export default MyComponent1 = () => {
  const onSubmit = () => {
    props.history.push({pathname:'/success',state:{title: 'my comp 1'})
  }
  return(
    <> jsx code here </>
  )
}

JSFiddle中的示例。

如果您想要更一般的内容，例如通过其id属性查找vnode，则可能需要使用递归并检查每个vnode子级。

如何在渲染器上的嵌套Vue组件中添加指令？

1 个答案: