feat(render-function): adds functional template ex for passing attrs (#1454)

* feat(render-function): adds functional template ex for passing attrs

* Simplify functional template example

Author: alexsasharegan

src/v2/guide/render-function.md

@@ -581,7 +581,7 @@ Vue.component('smart-list', {
 
 ### Passing Attributes and Events to Child Elements/Components
 
-On normal components, attributes not defined as props are automatically added to the root element of the component, replacing or [intelligently merging with](class-and-style.html) any existing attributes of the same name. 
+On normal components, attributes not defined as props are automatically added to the root element of the component, replacing or [intelligently merging with](class-and-style.html) any existing attributes of the same name.
 
 Functional components, however, require you to explicitly define this behavior:
 
@@ -597,6 +597,20 @@ Vue.component('my-functional-button', {
 
 By passing `context.data` as the second argument to `createElement`, we are passing down any attributes or event listeners used on `my-functional-button`. It's so transparent, in fact, that events don't even require the `.native` modifier.
 
+If you are using template-based functional components, you will also have to manually add attributes and listeners. Since we have access to the individual context contents, we can use `data.attrs` to pass along any HTML attributes and `listeners` _(the alias for `data.on`)_ to pass along any event listeners.
+
+```html
+<template functional>
+  <button
+    class="btn btn-primary"
+    v-bind="data.attrs" 
+    v-on="listeners"
+  >
+    <slot/>
+  </button>
+</template>
+```
+
 ### `slots()` vs `children`
 
 You may wonder why we need both `slots()` and `children`. Wouldn't `slots().default` be the same as `children`? In some cases, yes - but what if you have a functional component with the following children?