vuex-asr
Version:
* Version: 0.7.52 * License M.I.T. * [Online Documentation](https://vuex-asr.github.io/vuex-asr/) * author: Joris Wenting * email: vuex.asr@gmail.com * [linkedIn](https://www.linkedin.com/in/joriswenting/). * [contribute](https://vuex-asr.github.io/vuex-a
1 lines • 3.36 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{229:function(e,n,t){"use strict";t.r(n);var a=t(0),s=Object(a.a)({},(function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"passing-bindings"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#passing-bindings","aria-hidden":"true"}},[e._v("#")]),e._v(" passing bindings")]),e._v(" "),t("p",[e._v("For a quick overview go to the sandbox environment to follow along:")]),e._v(" "),t("p",[t("a",{attrs:{href:"https://codesandbox.io/s/manual-asr-pass-zl2o9",target:"_blank",rel:"noopener noreferrer"}},[t("OutboundLink")],1)]),e._v(" "),t("h2",{attrs:{id:"passing-a-binding-to-a-child-component"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#passing-a-binding-to-a-child-component","aria-hidden":"true"}},[e._v("#")]),e._v(" Passing a binding to a child component")]),e._v(" "),t("p",[e._v("This is in my opinion one of the most important features of the Vuex ASR plugin. It gives you the abillity to pass model-bindings to a child component.")]),e._v(" "),t("p",[e._v("This means that a model that has already been bound to the component, either via Vuex ASR or conventionally in the component itself will be "),t("code",[e._v("passable")]),e._v(" to a child component. Giving you ultimate flexibility in organising and generalising your codebase.")]),e._v(" "),t("p",[e._v("You could use asr-pass also in conventional Vue (or Vuex) projects, it instantly gives you the flexibility from being able to omit direct bindings in your child templates 😎")]),e._v(" "),t("h2",{attrs:{id:"example"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[e._v("#")]),e._v(" Example")]),e._v(" "),t("p",[e._v("So let's say we bind a model in our App file to a component "),t("code",[e._v("<example-message>")]),e._v(":")]),e._v(" "),t("pre",[t("code",[e._v('// src/App.vue\n\n<template>\n <div id="app">\n <p>In this example we will bind a store model here:</p>\n <example-message asr-bind-state="message IS v-model"/>\n </div>\n</template>\n\n...\n')])]),e._v(" "),t("p",[e._v("And pass it from "),t("code",[e._v("<example-message>")]),e._v(" to "),t("code",[e._v("<example-pass-child>")]),e._v(":")]),e._v(" "),t("pre",[t("code",[e._v('// src/components/ExampleMessage.vue\n\n<template>\n <div id="exampleMessage">\n <p>Print it in this component</p>\n '+e._s(e.message)+'\n <p>And pass it from here to a child component</p>\n <example-pass-child asr-pass="message"/>\n </div>\n</template>\n\n...\n')])]),e._v(" "),t("p",[e._v("note the "),t("code",[e._v("asr-pass")]),e._v(" attribute, since message was bound to this component it is available to be passed to a child component.")]),e._v(" "),t("pre",[t("code",[e._v('// src/components/ExamplePassChild.vue\n\n<template>\n <div id="asrPassChild">\n <h1>This is the child with the variable "message" passed:</h1>\n <p>'+e._s(e.message)+'</p>\n <input v-model="message"/>\n </div>\n</template>\n')])]),e._v(" "),t("p",[e._v("There's nothing more to it to start using it.")]),e._v(" "),t("p",[t("router-link",{attrs:{to:"/rename/About-generalisation-660be4a3-581f-40d8-a70c-c0c4f471eb41.html"}},[e._v("About generalisation")])],1)])}),[],!1,null,null,null);n.default=s.exports}}]);