How to use vue in scope-JS Tutorial-php.cn

How to use vue in scope

php中世界最好的语言

Release： 2017-12-31 10:27:50

Original

2185 people have browsed it

What I bring to you this time is how to use vue in scope. We all know that vue slot can pass any attribute or html element , but when calling the component In the page, we can use template scope="props" to get the attribute value on the slot. The obtained value is an object. This article will give you a detailed analysis.

It has been said above that the scope obtains an object. What does it mean? Let’s look at a simple demo first to understand~

<!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>

Copy after login

js code is as follows:

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

Copy after login

We can see the scope attribute value returned from above So, the value returned by scope is all the attribute values returned on the slot tag, and is saved in the form of an object. The slot has two attributes, one is row and the other is $index. Therefore, {"row": item, "$index": "index index"}; is returned, where item is an object in data.

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!