Heim > Artikel > Web-Frontend > Detaillierte grafische Erläuterung der Verwendung der Render-Methode

Detaillierte grafische Erläuterung der Verwendung der Render-Methode

php中世界最好的语言Original: 2018-03-23 11:47:339850Durchsuche

Dieses Mal werde ich Ihnen die Verwendung der Render-Methode mit Bildern und Text ausführlich erklären. Was sind die Vorsichtsmaßnahmen für die Verwendung der Render-Methode? Hier sind praktische Fälle, schauen wir uns das an.

Lassen Sie mich zunächst über mein persönliches Verständnis der Demo auf der offiziellen Website sprechen:

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<p id="app">
  <child :level="1">
    hello world
  </child>
</p>
<script type="text/x-template" id="anchored-heading-template">
  <p>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </p>
</script>
<script type="text/javascript">
Vue.component('child', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
});
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

Obwohl die Methode, Vorlagen zum Definieren von Komponenten zu verwenden, sehr intuitiv ist, Dadurch wird der Code zu lang. Sie können die Render-Methode verwenden

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<p id="app">
  <child :level="1">
    hello world
  </child>
</p>
<script type="text/javascript">
Vue.component('child', {
  render:function (createElement) {
    var body=this.$slots.default;
    //this.$slots返回了一个组件分发下来的元素和内容
    //this.$slots.default返回了具名的内容
    return createElement(
      'h'+this.level,
      //this.level是利用v-bind注入到组件中的level
      body
    )
  },
  //因为vue中组件父组件无法向子组件注入内容。所以我们需要通过
  //v-bind定义一个key，value向子组件注入内容。所要接收的值也需要在定义组件时的props属性中的定义一下
  props:{
    level:{
    }
  }
});
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

Das Folgende ist eine Demo der Slot-Namensverteilung: Einführung in die Verwendung von createElement:

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<p id="app">
  <child>
    <p slot="header">this is header</p>
    <p slot="center">this is center</p>
    <p slot="footer">this is footer</p>
  </child>
</p>
<script type="text/javascript">
  Vue.component('child', {
    render: function (createElement) {
     var header=this.$slots.header;
     var center=this.$slots.center;
     var footer=this.$slots.footer;
//createElement第一个参数是标签名,第二个参数是值
     return createElement('p',[
       createElement('p', header),
       createElement('p', center),
       createElement('p', footer),
     ])
    }
  });
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

Die Demo-Ergebnisse der erstellten Komponente sind wie folgt :

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Anzeigen von Markierungen und Polylinien auf Baidu-Karten

So entwickeln Sie ein WeChat-Applet, um Benutzermobile zu erhalten Telefonnummern Funktion

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der Verwendung der Render-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie JS die Browserkommunikation implementiertNächster Artikel：Wie JS die Browserkommunikation implementiert

In Verbindung stehende Artikel

Mehr sehen