집 >웹 프론트엔드 >JS 튜토리얼 >범위 내에서 vue를 사용하는 방법

범위 내에서 vue를 사용하는 방법

php中世界最好的语言원래의: 2017-12-31 10:27:502188검색

이번에 제가 소개할 내용은 vue 슬롯이 모든 property 또는 html 요소를 전달할 수 있다는 것을 모두 알고 있지만 컴포넌트가 호출되는 페이지에서는 템플릿 범위=를 사용할 수 있습니다. "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: {
 }
});

위에서 반환된 범위 속성 값을 보면 범위에서 반환된 값이 슬롯에서 반환된 모든 속성임을 알 수 있습니다. 태그 값은 객체 형태로 저장됩니다. 슬롯에는 두 가지 속성이 있는데, 하나는 행이고 다른 하나는 $index입니다. 따라서 {"row": item, "$index": "index index"}가 반환됩니다. 여기서 item은 데이터의 개체입니다.

위의 소개를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!