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>

猜你喜欢

转载自blog.csdn.net/qq_41619567/article/details/84953863