【2】假如需要通过父组件控制子组件是否显示（例如v-if或者v-show），那么这个指令显然是属于父组件的（例如放在父组件的data下面）。可以将标签写在子组件的模板上。
如代码：
<div> <button @click="toshow">点击让子组件显示</button> <children v-if="abc"> </children> </div> <script> var vm = new Vue({ el: '#app', data: { abc: false }, methods: { toshow: function () { this.abc = !this.abc; } }, components: { children: { //这个无返回值，不会继续派发 template: "<div>这里是子组件</div>" } } }); </script>
说明：
通过父组件（点击按钮，切换v-if指令的值）控制子组件是否显示。
【3】假如需要通过子组件，控制子组件是否显示（比如让他隐藏），那么这个指令显然是属于子组件的（会将值放在子组件的data属性下），那么就不能像上面这么写，而是必须放置在子组件的根标签中。
<div> <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>
说明：
点击子组件会让子组件消失；
点击父组件的按钮，通过更改子组件的tohidden属性，让子组件重新显示。
子组件的指令绑定在子组件的模板之中（如此才能调用）；
以上所述是小编给大家介绍的Vuejs第十一篇组件之slot内容分发实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: