Vue(둘)

Vue 구문 (2)
1. 슬롯 배포
1. slot 슬롯
1) 서브어셈블리 슬롯
서브어셈블리 템플릿에서 태그를 사용하여 슬롯 위치를 정의합니다. 태그에 컨텐트를 입력할 수 있으며 부모 어셈블리가 컨텐트를 가져오지 않을 때 이 컨텐트를 표시할 수 있습니다.

<template id="child-template"> 
    <div> 
        <div>     </div> 
        <div>{{msg}}</div> 
        <!--    slot        --> 
        <slot>      ,          </slot> 
    </div> 
</template> 
Vue.component('child', { 
    template:'#child-template', 
    props:['msg'] 
});

2) 상위 구성 요소 배포

   <child>    ，             <solt>   。 


<div id="app"> 
    <!--      --> 
    <child :msg="msgText"> 
        <!--     ,      --> 
        <h4>     </h4> 
        <h5>    ....</h5> 
    </child> 
</div> 
 
<template id="child-template"> 
    <div> 
        <div>     </div> 
        <div>{{msg}}</div> 
        <!--    slot        --> 
        <slot>      ,          </slot> 
    </div> 
</template>
<script> 
    Vue.component('child', { 
        template:'#child-template', 
        props:['msg'] 
    }); 
    var app = new Vue({ 
        el:'#app', 
        data:{ 
            msgText:'     ' 
        } 
    }); 
</script>

2. 구명 슬롯

    slot,          。
	               ,    name        , :，        < slot='header'>      。


	
	<html>
	<head>
		<meta charset="UTF-8">
		<title>slot  </title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>

	<body>
  <div id="app">
		<!--<my-hello></my-hello>-->
		<my-hello>
			<h3 slot="header">  </h3>
			<p slot="footer">  p  </p>
		</my-hello>
	</div>
	
	<!--  template  -->
	<template id="tpl1">
		<div>
			<slot name="header">        ，        </slot>
			<div>--------------------</div>
			<!--  ，  -->
			<slot name="footer">        ，        </slot>
		</div>
	</template>
	
</body>

<script type="text/javascript">
	
	//      
	Vue.component("my-hello",{
		template:"#tpl1",
	});
	var app = new Vue({
		el:"#app"
		
	});
</script>
</html>

3、slot-scope
역할 영역 슬롯 slot-scope, 부모 구성 요소는 슬롯을 통해 부모 구성 요소의 내용을 혼합하고, 서브 구성 요소도 slot 역할 영역을 통해 슬롯 slot 내부에 데이터를 전송할 수 있으며, 사용 방식: 부모 구성 요소는 인용을 통해 참조할 수 있습니다.



 <body>
    <div id="app">
			<!--<my-hello></my-hello>-->
			<my-hello>
				<template slot-scope="props">
					<h3>  ----{{props.msg}}----{{props.txt}}</h3>
				</template>
			</my-hello>
		</div>
		
		<!--  template  -->
		<template id="tpl1">
			<div>
				<div>--------------------</div>
				<!--  ，  -->
				<slot msg="   " txt="Hello">        ，        </slot>
			</div>
		</template>
		
	</body>
	
	<script type="text/javascript">
		
		//      
		Vue.component("my-hello",{
			template:"#tpl1",
		});
		
		
		var app = new Vue({
			el:"#app"
			
		});
		
	</script>

	<body>
	<div id="app">
		<!--<my-hello></my-hello>-->
		<my-hello>
			<h3 slot-scope="{msg,txt}">  ----{{msg}}----{{txt}}</h3>
		</my-hello>
	</div>
	
	<!--  template  -->
	<template id="tpl1">
		<div>
			<div>--------------------</div>
			<!--  ，  -->
			<slot msg="   " txt="Hello">        ，        </slot>
		</div>
	</template>
	
</body>

<script type="text/javascript">
	
	//      
	Vue.component("my-hello",{
		template:"#tpl1",
	});	
var app = new Vue({
		el:"#app"
		
	});
	
</script>

4. 동적 구성 요소
탭의 is 속성을 사용하여 여러 개의 구성 요소를 마운트 지점에 동적으로 연결합니다. is 연결 값을 바꾸어 구성 요소를 전환합니다.

<body>
<div id="app">
			<!--3、    -->
			/ <a href='#' @click.prevent="page='index'">  </a>
			/ <a href='#' @click.prevent="page='news'">  </a>
			/ <a href='#' @click.prevent="page='login'">  </a>
			
			<!--2、  component  -->
			<component :is="page"> </component>
		</div>
	</body>
	
	<script type="text/javascript">
		// 1、    
		Vue.component('index', {
		    template:'  
'
		});
		Vue.component('news', {
		    template:'   
'
		});
		Vue.component('login', {
		    template:'   
'
		});
		
		new Vue({
			el:"#app",
			data:{
	            page:'index'
	        }
		});
	</script>

keep-alive
전환된 구성 요소를 메모리에 저장하면 상태를 유지하거나 다시 렌더링하지 않습니다.이를 위해keep-alive 명령을 추가할 수 있습니다.

<div id="app">
			<!--3、    -->
			/ <a href='#' @click.prevent="page='index'">  </a>
			/ <a href='#' @click.prevent="page='news'">  </a>
			/ <a href='#' @click.prevent="page='login'">  </a>
			
			<!--2、  component  -->
			<keep-alive>
		        <component :is="page"></component>
		    </keep-alive>
		</div>
	</body>
	
	<script type="text/javascript">
		// 1、    
		Vue.component('index', {
		    template:'  
',
		    //       ，  （    ）
		    mounted: function () {
		        console.log('  ...  ');
		    }
		});
		Vue.component('news', {
		    template:'   
',
		    mounted: function () {
		        console.log('  ...   ');
		    }
		});
		Vue.component('login', {
		    template:'   
',
		    mounted: function () {
		        console.log('  ...   ');
		    }
		});
		
		new Vue({
			el:"#app",
			data:{
	            page:'index'
	        }
		});
	</script>

refs 속성
ref를 사용하여 모든 구성 요소에 고정된 이름을 붙여 줍니다. 부모 구성 요소에서 $refs를 사용하여 하위 구성 요소에 접근할 수 있습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Vue(둘)

좋은 웹페이지 즐겨찾기