Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう-Vue.js-php.cn

Vue はどのようにして JSX を通じてコンポーネントを動的にレンダリングしますか?次の記事では、Vue が JSX を通じてコンポーネントを動的に効率的にレンダリングする方法を紹介します。

Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう

#1. 明確な要件

動的コンポーネントをレンダリングするにはどうすればよいですか? [関連する推奨事項:

vuejs ビデオチュートリアル ]

次のような配列構造のセットがあります:

const arr = [ 
  { tag: &#39;van-field&#39; },  // 输入框
  { tag: &#39;van-cell&#39; },   // 弹出层
  { tag: &#39;van-stepper&#39; } // 步进器
]

ログイン後にコピー

tag レンダリングを取得したいarr コンポーネントをループすることで対応します。

Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう

最適な書き方を分析してみましょう。

2. 分析

2.1 v-if が世界中に広がる

v-for を書くことができます arr 配列をループし、v-if を使用してタグを決定し、対応するコンポーネントタイプをレンダリングします。

このように書くことも不可能ではありませんが、拡張性が悪く、タグを追加するたびにテンプレートにv-ifを追加する必要があります。

最初はこう書いた人も多いと思います。

しかし、これは私たちエレガントな人が書くべきコードではありません。

2.2 コンポーネントタグの動的レンダリング

tag のタグに基づいて実際のタグをレンダリングできますか。

重要なのは、ループ内で走査されたタグに基づいて実際のコンポーネントをレンダリングする方法です。

<van-cell  v-for="(cell, cellKey) in arr" :key="cellKey" >
      <!-- 动态渲染  -->
</van-cell>

ログイン後にコピー

本日の主役であるJSXさんにステージにご登場いただきたいと思います。

Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう

#2.3 JSX 動的レンダリングコンポーネント

親コンポーネント


  
  


const arr = [ 
  { tag: &#39;van-field&#39; },  // 输入框
  { tag: &#39;van-cell&#39; },   // 弹出层
  { tag: &#39;van-stepper&#39; } // 步进器
]

ログイン後にコピー

子コンポーネントRendTag.vue

<script>
const AssemblyRend = {
  name: "assembly-rend",
  props: ["cell"],
  data() {
    return {
      input: "",
    };
  },
  methods: {
    onClick() {
      this.$emit("changeTag", this.input);
    },
  },
  computed:{
    itemVal:{
      get(){
        return this.cell.value
      },
      set(v){
        this.cell.value = v
      }
    }
  },
  render() {
    const { cell } = this; // 解构
    const assembly = cell.tag;  // 这里就是我们动态渲染组件的核心 

    return (
        <assembly
          v-model={this.itemVal}
          placeholder={cell.placeholder}
          min={cell.min}
          onClick={this.onClick}
        >
        </assembly>
      );
  },
};

export default {
  name: "RendTag",
  props: {
    cell: {
        type: Object,
        default:()=>{
            return {
                {
                    "title": "能否输入",
                    placeholder: &#39;请输入姓名&#39;,
                    "value": "name",
                    "tag": "van-switch",
                }
            }
        }
    },
  },
  methods: {
    changeTag(val) {},
  },
  render() {
    const { cell } = this; // 解构
    return (
      <div class="rendTag-content">
        <AssemblyRend
          cell={cell}
          onChangeTag={this.changeTag}
        ></AssemblyRend>
      </div>
    );
  },
};
</script>

ログイン後にコピー

JSX の

render

を使用して JavaScript リターンコンポーネントを記述し、タグの動的なレンダリングを実現できます。

render

は、vue のテンプレートと同等です。したがって、レンダリング効果は次のようになります: タグに従って実際のコンポーネントにレンダリングします。

Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう通常のコンポーネントを使用しますが、これを私たちが作成したものにはレンダリングできません。 JSX のコンポーネントのようなものが必要です。

こちら

v-model

計算された属性を使用する場合の落とし穴を読むことをお勧めします:実際の v-model で複数ループ式をバインドする方法 (原則を含む) 実はこの 2 つの記事はある程度関連していますが、ここでは要件を分けました。

主に友人の読みと理解を促進するためです。

3. vue での JSX の使い方

この要件を踏まえて、JSX を補っていきます。

3.1 それは何ですか?

JSX は Javascript の構文拡張です、

JSX = Javascript XML

、つまり Javascript で XML を記述することを意味します。JSX のこの機能により、Javascript のような柔軟性があり、同時に HTML のセマンティクスと直観性を備えています。

強力なアクティビティを持つ一部のコンポーネントは JSX で置き換えることができます (上記の要件など)。

プロジェクト全体で JSX を使用する必要はありません。

3.2 基本的な使い方

3.2.1 機能コンポーネント

ButtonCounter コンポーネントをコンポーネントに埋め込むこともできます。

const ButtonCounter = {
  name: "button-counter",
  props: ["count"],
  methods: {
    onClick() {
      this.$emit("changeNum", this.count + 1);
    }
  },
  render() {
    return <button onClick={this.onClick}>数量：{this.count}</button>;
  }
};

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    // 改变button按钮数量
    changeNum(val) {
      this.count = val;
    }
  },
  render() {
    const { count } = this; // 解构
    return (
      <div class="hello-world-content">
        <ButtonCounter style={{ marginTop: "20px" }} count={count} onChangeNum={this.changeNum}></ButtonCounter>
      </div>
    );
  }
};

ログイン後にコピー

3.2.2 共通属性、インラインスタイル、動的クラスとスタイル

ご覧のとおり、基本的には vue のテンプレートの書き方と同じですが、これは中かっこです。

# では、vue テンプレートでは中かっこの 2 つのペアが必要ですが、

JSX

では、

と 1 つのペアを記述するだけで済みます。の＃＃＃。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">export default { name: "HelloWorld", props: { msg: String }, data() { return { count: 0, text: "Hello World!", msgClass: "msg-class", isGreen: true }; }, render() { const { count, text } = this; // 解构 return ( <div class="hello-world-content"> <p class={this.msg ? this.msgClass : ""}>动态绑定class</p> <p style={this.isGreen ? "color: green" : ""}>动态绑定style</p> </div> ); } };</pre><div class="contentsignin">ログイン後にコピー</div></div>

3.2.3 共通の命令 Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう

v-html、v-if、v-for、v- の共通命令モデル JSX では使用できないため、他の方法で実装する必要があります。

v-html

JSX で DOM の innerHTML を設定したい場合は、

domProps# を使用する必要があります。 ##。

コンポーネントの使用法:

<HelloWorld 
   msg="<div class=&#39;custom-div&#39;>这是自定义的DOM</div>"> 
</HelloWorld>

ログイン後にコピー

コンポーネントコード:

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {};
  },
  methods: {},
  render() {
    return <div domPropsInnerHTML={this.msg}></div>;
  }
};

ログイン後にコピー

DOM のレンダリング結果:

#v- for

Vue が JSX を通じてコンポーネントを動的にレンダリングする方法について話しましょう

map

を使用して実装します:

render() {
  const list = [1,2,3]
  return( 
    <div>
      { list.map(item => <button>按钮{item}</button>) }
    </div>
  )
}

ログイン後にコピー

v-if

簡単な例: 3 項を使用します

render() {
    const bool = false;
    return <div>{bool ? <button>按钮1</button> : <button>按钮2</button>}</div>;
}

ログイン後にコピー

複雑な例: JS を直接使用する

render() {
  let num = 3
  if(num === 1){ return( <button>按钮1</button> ) }
  if(num === 2){ return( <button>按钮2</button> ) }
  if(num === 3){ return( <button>按钮3</button> ) }
}

ログイン後にコピー

v-model

直接使用:

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      value: "abc"
    };
  },
  watch: {
    value(val) {
      console.log("this.model内容：" + val);
    }
  },
  methods: {},
  render() {
    return (
      <div>
        <input v-model={this.value} placeholder="普通文本" />
      </div>
    );
  }
};

ログイン後にコピー

3.2.4 リスニングイベントとイベント修飾子

リスニングイベント

onChange のようなリスニングイベント、onClickなどが使えます。

需要注意的是，传参数不能使用 onClick={this.handleClick(params)}，这样子会每次 render的时候都会自动执行一次方法。

应该使用bind，或者箭头函数来传参。

组件示例代码：

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {};
  },
  methods: {
    handleClick(val) {
      alert(val);
    }
  },
  render() {
    return (
      <div>
        <button type="button" onClick={this.handleClick.bind(this, 11)}>
          方式一
        </button>
        <button type="button" onClick={() => this.handleClick(22)}>
          方式二
        </button>
      </div>
    );
  }
};

ログイン後にコピー

用监听事件来实现v-model:

methods: {
    input(e) {
      this.value = e.target.value;
    }
  },
  render() {
    return (
      <div>
        <input type="text" value={this.value} onInput={this.input} />
      </div>
    );
  }

ログイン後にコピー

也可以调整为：

<input 
  type="text" 
  value={this.value} 
  onInput={(e) => (this.vaue = e.target.value)} 
/>

ログイン後にコピー

还可以使用对象的方式去监听事件：解构事件

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      value: ""
    };
  },
  watch: {
    value(val) {
      console.log("this.model的内容：" + val);
    }
  },
  methods: {
    handleInput(e) {
      this.value = e.target.value;
    },
    handleFocus(e) {
      console.log(e.target);
    }
  },
  render() {
    return (
      <div>
        <input type="text" value={this.value} {...{ on: { input: this.handleInput, focus: this.handleFocus } }} />
      </div>
    );
  }
};

ログイン後にコピー

nativeOn仅对于组件，用于监听原生事件,也可以使用对象的方式去监听事件：

{...{nativeOn:{click: this.handleClick}}}

ログイン後にコピー

事件修饰符

和指令一样，除了个别的之外，大部分的事件修饰符都无法在JSX中使用。

.stop ：阻止事件冒泡，在JSX中使用event.stopPropagation()来代替
.prevent：阻止默认行为，在JSX中使用event.preventDefault() 来代替
.self：只当事件是从侦听器绑定的元素本身触发时才触发回调，使用下面的条件判断进行代替

if (event.target !== event.currentTarget){
  return
}

ログイン後にコピー

.enter与keyCode: 在特定键触发时才触发回调

if(event.keyCode === 13) {
  // 执行逻辑
}

ログイン後にコピー

除了上面这些修饰符之外，尤大大对于.once,.capture,.passive,.capture.once做了优化，简化代码：

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    handleClick(e) {
      console.log("click事件:" + e.target);
    },
    handleInput(e) {
      console.log("input事件:" + e.target);
    },
    handleMouseDown(e) {
      console.log("mousedown事件:" + e.target);
    },
    handleMouseUp(e) {
      console.log("mouseup事件" + e.target);
    }
  },
  render() {
    return (
      <div
        {...{
          on: {
            // 相当于 :click.capture
            "!click": this.handleClick,
            // 相当于 :input.once
            "~input": this.handleInput,
            // 相当于 :mousedown.passive
            "&mousedown": this.handleMouseDown,
            // 相当于 :mouseup.capture.once
            "~!mouseup": this.handleMouseUp
          }
        }}
      >
        点击模块
      </div>
    );
  }
};

ログイン後にコピー

3.3 插槽

3.3.1 普通插槽与具名插槽

父传子。

示例：

<HelloWorld>
    <template slot="default">默认内容</template>
    <template slot="footer">
      <el-button type="primary">确定</el-button>
      <el-button>取消</el-button>
    </template>
</HelloWorld>

ログイン後にコピー

HelloWorld组件代码：this.$slots

export default {
  name: "HelloWorld",
  render() {
    return (
      <div>
        <div class="default">{this.$slots.default}</div>
        <div class="footer">{this.$slots.footer}</div>
      </div>
    );
  }
};

ログイン後にコピー

3.3.2 作用域插槽

子传父。

示例：

<HelloWorld>
    <template v-slot:content="{ name, age }">
      <div>姓名：{{ name }}</div>
      <div>年龄：{{ age }}</div>
    </template>
</HelloWorld>

ログイン後にコピー

HelloWorld组件代码：this.$scopedSlots

export default {
  name: "HelloWorld",
  render() {
    return (
      <div>
        <div class="content">{this.$scopedSlots.content({ name: "张三", age: 20 })}</div>
      </div>
    );
  }
};

ログイン後にコピー

子组件通过{this.$scopedSlots.content({ name: "张三", age: 20 })}指定插槽的名称为content,并将含有name,age属性的对象数据传递给父组件，父组件就可以在插槽内容中使用子组件传递来的数据。