ホームページ > 記事 > ウェブフロントエンド > スコープ内でvueを使用する方法

スコープ内でvueを使用する方法

php中世界最好的语言オリジナル: 2017-12-31 10:27:502113ブラウズ

今回紹介するのは、vue スロットが任意の property または html 要素を渡すことができることは誰もが知っていますが、コンポーネントが呼び出されるページでは、templatescope= を使用できます。 "props "スロットの属性値を取得するために、取得される値はオブジェクトです。この記事では、優れた分析を提供します。

上で述べたように、スコープはオブジェクトを取得することを意味します。まず、理解するために簡単なデモを見てみましょう~

<!DOCTYPE html>
<html>
 <head>
 <title>Vue-scope的理解</title>
 <script src="./libs/vue.js"></script>
 <link rel="stylesheet" href="./css/index.css" rel="external nofollow" />
 <script src="./js/scope.js"></script>
 </head>
 <body>
 <div id="app">
  <tb-list :data="data">
  <template scope="scope">
   <div class="info" :s="JSON.stringify(scope)">
   <p>姓名:{{scope.row.name}}</p>
   <p>年龄: {{scope.row.age}}</p>
   <p>性别: {{scope.row.sex}}</p>
   <p>索引：{{scope.$index}}</p>
   </div>
  </template>
  </tb-list>
 </div>
 <script id="tb-list" type="text/x-template">
  <ul>
  <li v-for="(item, index) in data">
   <slot :row="item" :$index="index"></slot>
  </li>
  </ul>
 </script>
 <script type="text/javascript">
  new Vue({
  el: &#39;#app&#39;,
  data() {
   return {
   data: [
    {
    name: &#39;kongzhi1&#39;,
    age: &#39;29&#39;,
    sex: &#39;man&#39;
    }, 
    {
    name: &#39;kongzhi2&#39;,
    age: &#39;30&#39;,
    sex: &#39;woman&#39;
    }
   ]
   }
  },
  methods: {
     
  }
  });
 </script>
 </body>
</html>

js コードは次のとおりです:

Vue.component(&#39;tb-list&#39;, {
 template: &#39;#tb-list&#39;,
 props: {
 data: {
  type: Array,
  required: true
 }
 },
 data() {
 return {
 }
 },
 beforeMount() {
 },
 mounted() {
 },
 methods: {
 }
});

上記で返されたスコープ属性値から、スコープによって返される値がスロットで返されるすべての属性であることがわかります。 tag 値はオブジェクトの形式で保存されます。スロットには 2 つの属性があります。1 つは row で、もう 1 つは $index です。したがって、{"row": item, "$index": "indexindex"}; が返されます。ここで、item はデータ内のオブジェクトです。

上記の紹介を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。