第一种情况：内部有两个独立插槽（模板自动迭代2次）
<!DOCTYPE html> <html> <head> <title> hello world vue </title> <meta charset="utf-8" /> </head> <body> <div id="app" v-cloak> <child-component> <template scope="props"> <p>来自父组件的内</p> <p> {{props.msg1}}</p> <p> {{props.msg2}}</p> <p> {{props}}</p> <hr> </template> </child-component> </div> </body> </html> <script src="jquery-3.1.1.js"></script> <script src="vue.js"></script> <script> $(document).ready(function() { }); </script> <script> var bus = new Vue(); Vue.component('child-component', { template: ' <div class="container"> <slot msg1="来自子组件的内容1"></slot> <slot msg2="来自子组件的内容2"></slot> <div>', props: [], data: function() { return {} }, methods: {} }); var app = new Vue({ el: '#app', data: { showChild: true }, computed: {}, methods: {}, components: {}, mounted: function() {} }); </script>
来自父组件的内
来自子组件的内容1
{ "msg1": "来自子组件的内容1" }
---------------------------------------
来自父组件的内
来自子组件的内容2
{ "msg2": "来自子组件的内容2" }
第二种情况：内部有1个独立插槽（虽然有两个变量，模板仅仅迭代一次）
<!DOCTYPE html> <html> <head> <title> hello world vue </title> <meta charset="utf-8" /> </head> <body> <div id="app" v-cloak> <child-component> <template scope="props"> <p>来自父组件的内</p> <p> {{props.msg1}}</p> <p> {{props.msg2}}</p> <p> {{props}}</p> <hr> </template> </child-component> </div> </body> </html> <script src="jquery-3.1.1.js"></script> <script src="vue.js"></script> <script> $(document).ready(function() { }); </script> <script> var bus = new Vue(); Vue.component('child-component', { template: ' <div class="container"> <slot msg1="来自子组件的内容1" msg2="来自子组件的内容2"></slot> <div>', props: [], data: function() { return {} }, methods: {} }); var app = new Vue({ el: '#app', data: { showChild: true }, computed: {}, methods: {}, components: {}, mounted: function() {} }); </script>
来自父组件的内
来自子组件的内容1
来自子组件的内容2
{ "msg1": "来自子组件的内容1", "msg2": "来自子组件的内容2" }