1. 程式人生 > >Vue slot(在父元件中控制子元件中的值)

Vue slot(在父元件中控制子元件中的值)

<div id="app">
			<button @click="toshow">點選讓子元件顯示</button>
			<children>
				<span slot="first">【12345】</span>
				<!--上面這行不會顯示-->
			</children>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				methods: {
					toshow: function() {
						this.$children[0].tohidden = true;
					}
				},
				components: {
					children: { //這個無返回值,不會繼續派發  
						template: "<div v-if='tohidden' @click='tohide'>這裡是子元件</div>",
						data: function() {
							return {
								tohidden: true
							}
						},
						methods: {
							tohide: function() {
								this.tohidden = !this.tohidden;
							}
						}
					}
				}
			});
		</script>