How to use template scope in vue jsx? How to use template scope in vue jsx? vue.js vue.js

How to use template scope in vue jsx?


After read the doc three times , I can answer the question myself now O(∩_∩)O .

<test-slot scopedSlots={    {        default: function (props) {            return [<div>{props.text}</div>,<div>this is real body</div>]        }    }}></test-slot>

the slot name is default.

So. we can access the scope in the scopedSlots.default ( = vm.$scopedSlots.default)

the callback argument 'props' is the holder of props.

and the return value is vNode you cteated with scope which exposed by child component.

I realize the jsx is just a syntactic sugar of render function ,it still use createElement function to create vNode tree.


now in babel-plugin-transform-vue-jsx 3.5, you need write in this way:

 <el-table-column  { ...{    scopedSlots: {      default: scope => {        return (          <div class='action-list'>          </div>        )      }    }  } }>  </el-table-column>