Question

代表：

<body>
<div id="app">
  <ro-weview id="wv" src="http://google.com"></ro-weview>
</div>

<script>
  (function () {
    Vue.component("ro-webview", {
      props: ["src"],
      template: `
<input type="text"  class="form-control" style="border-color: #ccc;outline: none; box-shadow: none !important; " :value="src"/>
<iframe :src="src"/>
</div>`
    })
  })()

  new Vue({el: "#app"})

  setVueProp("#wv", "src", "http://bing.com")
</script>

</body>

我希望实现#setVueProp来设置ro-webview src，怎么做呢？我知道使用js get iframe可以设置它的src，但我希望setProp用于ro-webview实例

Answer 1

您无法执行setVueProp之类的操作，但您可以随时拥有包含多个道具的组件，但只能根据您的要求传递一些道具。

如果需要，您可以在props上进行验证，在将其他道具作为可选项的情况下强制使用少数道具。

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

您不需要将所有道具传递给此组件，但只有在required为真的情况下才需要传递。

Answer 2

您需要决定谁负责更改它。鉴于它是一个属性，我会说父母应该这样做。您可以向父级添加print("%s is a %s after converting" % (key, df['one'].dtype))数据属性，并使用该属性进行更改。

以下是一个例子：

:src

Answer 3

我只为我自己的应用程序编写js，只运行最新的chrome，所以我可以使用es6语法，所以我认为下面的代码很容易理解，def相对类放置组件相关函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <ro-webview id="wv" src="https://google.com"></ro-webview>
</div>

<script>
  (function () {
    Vue.component("ro-webview", {
      props: ["src"],
      template: `<iframe :src="src" target="_blank" style="width:100%;"/>`,
      mounted: function () {
        var thiz = this
        $(document).on("ro-wemedia.setSrc", function (e, v) {
          thiz.$set("src", v)
        })
      }
    })
  })()

  class RoWebview {
    constructor(selector) {
      this.selector = selector
    }

    setSrc(v) {
      $(this.selector).attr("src", v)
    }
  }

  new Vue({el: "#app"})
  new RoWebview("#wv").setSrc("http://bing.com")
</script>

</body>
</html>

如何在js中动态更改vue组件道具

3 个答案: