Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.6/vue.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <h1>Dynamic Components/Props</h1>
  <div id="app"></div>
</body>
</html>
 
​
body {
  font-family: Arial;
}
 
// create component proxy
​
Vue.component('component-proxy', {
  props: {
    name: {
      type: String,
      required: true
    },
    props: {
      type: Object,
      default: () => {}
    }
  },
​
  render(createElem) {
    return createElem(this.name, {
      attrs: this.props
    });
  }
});
​
// create example simple text component
​
Vue.component('simple-text', {
  props: ['content'],
  template: `
    <p>
      <strong>Simple Text says</strong>:
      <span v-text="content"></span>
    </p>
  `
});
​
​
// create app component
​
Vue.component('app', {
  data() {
    return {
      name: 'simple-text',
      props: {
        content: "I've been proxied!"
      }
    }
  },
  template: `
    <div>
      <simple-text content="Here I am for real" />
      <component-proxy :name="name" :props="props" />
    </div>
  `
});
​
// render app
​
new Vue({
  el: '#app',
  render: c => c(Vue.component('app'))
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jeffturcottepro
0viewers