preface

Recently I met a project, which was to make secondary encapsulation of Element-UI and build some component libraries of my own, many of which were realized by the render function and the template template. Besides, the form piece was a complex business logic, which used JSX syntax. I also took the time to study how JSX was used in VUE, so I wrote down my own demo so I could catch up later.

The main content

The main structure of demo is as follows

  • Hello.vue
# hello. vue <script> export default {name: "Hello", data() {return {STR: "Hello component ",}; }, props: {address: {type: String, default() {return "This is the address "; }},}, Render () {return (<div> <span>{this. STR}</span> <h1> named slot </h1> {/*} {this.$slot.test} Person ({name: 'John ', age: 65})} </div>); person({name:' John ', age: 65})}. }}; </script> <style scoped></style>Copy the code
  • world.js
# world.js export default {data() {return {MSG: "world component ", detail: {address: "salary: "10k",},}; }, /* eslint-disable */ render() { return ( <div> <div>{this.msg}</div> <div>{this.$slots.demo}</div> <div>{this.$scopedSlots.data(this.detail)}</div> </div> ); }};Copy the code
  • demo.js
# demo.js export default { props: { value: { type: Object, default() { return {}; }, }, }, data() { return { msg: "demo2", }; }, render() { const { msg, value } = this; return ( <div> <input type="text" v-model={msg} /> <input type="text" v-model={value.name} /> <input type="text" v-model={value.address} /> </div> ); }};Copy the code
  • App.vue
<! --<template> <div id="app"> <div>{{myProp}}</div> <slot> V - bind: MSG = "MSG" > other slot < / slot > < div ref = "hahaha" v - if = "isShow" > {{MSG}} < / div > < div > < button @ click = "change" > click < / button > </div> <Hello> <template V-slot :test> <div> slot </div> </template> <template V-slot :person="{name, Age}"> < span style = "box-sizing: border-box; color: RGB (74, 74, 74); </template> </Hello> <world> <template V-slot :demo> This is the demo in world </template> <template v-slot:data="detail"> {{ detail.address }} {{ detail.salary }} </template> </world> </div> </template>--> <script> import Hello from "./components/Hello"; import World from "./components/world"; import Demo from "./components/demo"; export default { name: "App", components: { Hello, World, Demo }, props: { myProp: { type: String,},}, data() {return {isShow: false, MSG: "what this is", $STR: "this is the key with $character ", demo2: {name: "demo", address: "demo2 address", }, }; }, created() {}, methods: { test() { console.log("this is test method"); }, change() { this.isShow = true; This. MSG = "I changed the value "; }, }, render() { const { msg, isShow, demo2 } = this; Return (<div id="app"> <div>{MSG}</div> <br /> <slot> default slot </slot> <slot name="otherSlot" MSG ={MSG}> otherSlot </slot> {/* V-if and V-for are not available in JSX, but can be implemented with ternary expressions and maps. See the vue documentation */} {isShow? <div>{msg}</div> : <div>show false</div>} <div> {/* This */} <button onClick={this.change}> click </button> </div> {/* In JSX, if you declare slots, you must use */} <Hello slots={{test: () => {return <div>test slot </div>; },}} scopedSlots={{person: (props) => {return (<div> I am {props. Name}, age} age </div>); }}} / > < world slots = {{demo: () = > {return < div > this is a demo in world < / div >. },}} // We can also assign values to vue scopedSlots={{data: ({ address, salary }) => { return ( <div> {address} {salary} </div> ); }}} / > {/ * test v - two-way binding mode * /} < demo v - model = {demo2} / > < / div >). }}; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

conclusion

Note:

  1. The render function, if the render function uses a key:value instead of ES6 syntax, then you have to write the h variable, vue is createElement, or you can write the H variable instead, But you must declare a variable const h = this.$createElement, otherwise the program will report an error
  2. If ES6 syntax is used, don’t write the h variable, you can write it if you want, but ESLint checks will say ‘h’ is defined but never used, so you have to disable eslinit checks with /* esLint disbale */

Example:

# ES6
render() {
  return (
    <div>
      <div>{this.msg}</div>
      <div>{this.$slots.demo}</div>
      <div>{this.$scopedSlots.data(this.detail)}</div>
    </div>
  );
},
# ES5
render: function(h) {
  return (
    <div>
      <div>{this.msg}</div>
      <div>{this.$slots.demo}</div>
      <div>{this.$scopedSlots.data(this.detail)}</div>
    </div>
  );
},
# 或者
render: function() {
  const h = this.$createElement
  return (
    <div>
      <div>{this.msg}</div>
      <div>{this.$slots.demo}</div>
      <div>{this.$scopedSlots.data(this.detail)}</div>
    </div>
  );
},
Copy the code
  1. JSX syntax props to pass what v – don’t use the bind, direct use of key = {variable}, JSX grammar whether pass values or display values are a curly braces {}, if the value is an object, The format is {{}}. See the vue documentation and # babel-plugin-transform-vue-jsx documentation
  2. Note the use of named and scoped slots

reference

Vue document Babel – plugin – transform – vue – JSX