Props

Basic Concepts

Props is dynamic or static data which you can past in child components

Dynamic data is passed using p:propName a static one using #propName.
Jet creates this.propName inside the child component.

You no need to initialize props inside child component like vue.js does, Jet automatically does it.

Important Note: Dynamic props should be an object or array, string not supported for now(will be in further versions), think od organizing you data in advance. That makes two way binding and no need to do vue-like emits or prop:updated

Example

//parent component which pass both static and dynamic props
com({
  name: 'com-props',
  data: {
    title: 'Props Example',
    post: {
       title: 'Post Title', 
       content: 'Post content...', 
    }
  },
  tpl:`
        <h1>{{title}}</h1>
        <com-child #static_prop="Static Prop" p:dynamic_prop="post"></com-child>
    `,
});

//child component which gets static and dynamic props
com({
  name: 'com-child',
  tpl: `
  <h2>{{static_prop}}</h2>
  <h3>{{dynamic_prop.title}}</h3>
  <div>{{dynamic_prop.content}}</div>
  `,
});

What the difference?

What the difference between dynamic and static data
Dynamic you pass only key of component ie for this.parent_prop you past only parent_prop, Jet see attribute starting with p:(eg p:child_prop) and create property this.child_prop and process value parent_prop as this. parent_prop

Static props, you pass string which not process as dynamic, eg #title=”My Title”

Props inside of Iteration

Just remember: Inside iterated elements to pass dynamic data use i:propName. It’s easy to remember keeping in mind p: is property, i: is iteration or index as you wish

Example

//parent component which pass dynamic props inside of iteration

//important if you pass as property whole iterated object it should be "e", ie i:post="e"
com({
  name: 'com-iprops',
  data: {
    title: 'Posts Example',
    posts: [
      {
        title: 'Post',
        content: 'Lorem ipsum dolor sit amet consectetur adipisicing eli',
      },
      {
        title: 'Another Post',
        content: 'Temporibus exercitationem cupiditate harum fuga',
      },
    ],
  },
  tpl: `
        <h1>{{title}}</h1>
        <j-for data="posts">
            <com-post i:post="e"></com-post>
        </j-for>
    `,
});

//child component which gets dynamic props
com({
  name: 'com-post',
  tpl: `
  <h3>{{post.title}}</h3>
  <div>{{post.content}}</div>
  `,
});