如何在js中动态改变vue组件props

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进行验证，使一些 props 是强制性的，而其他 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
      }
    }
  }
})

你不需要将所有的 props 传递给这个组件，但只有在required是 true 的地方才需要总是传递。

Answer 2

你需要决定谁负责改变它。 鉴于它是一个财产，我会说父母应该这样做。 您可以将:src数据属性添加到父级并使用它来更改它。

这是一个例子：

 <script src="https://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script> <div id="app"></div> <script type="text/javascript"> window.addEventListener('load', function() { var webview = Vue.component("ro-weview", { 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>' }) var myApp = new Vue({ el: "#app", template: '<div id="app"><ro-weview :src="src"></ro-weview></div>', data: function() { return { src: 'http://www.google.com' } }, methods: { setSrc: function(src) { this.src = src } }, components: { 'RoWebview': webview } }) myApp.setSrc('http://www.bing.com') }) </script>

Answer 3

我只为自己的应用写js，只在最新的chrome下运行，所以我可以使用es6语法，所以我觉得下面的代码很容易理解，定义相对类来放置组件相关函数

<!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组件props

问题描述

3 个解决方案

解决方案1
0 2016-12-30 13:57:46

解决方案2
0 2016-12-30 14:41:18

解决方案3
-2 2016-12-30 14:46:36

如何在js中动态改变vue组件props

问题描述

3 个解决方案

解决方案1 0 2016-12-30 13:57:46

解决方案2 0 2016-12-30 14:41:18

解决方案3 -2 2016-12-30 14:46:36

解决方案1
0 2016-12-30 13:57:46

解决方案2
0 2016-12-30 14:41:18

解决方案3
-2 2016-12-30 14:46:36