master

分支 (1)

管理

管理

master

front-end-development-learning
/
组件7-插槽.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">

            <com1>
                插槽内容可以为任何代码，甚至可以是其他组件，但是必须要有slot标签，
                如果没有，那么该组件起始标签和结束标签之间的任何内容都会被抛弃。
                <h1>我也想进入插槽</h1>
                <h2>只能访问父组件的变量：{{msg}}</h2>
                <!--无法访问变量url<h2>{{url}}</h2>-->
                <p>----------------------------</p>
                <com2></com2>
            </com1>

        </div>
        <template id = "temp1">
            <div>
                <h1>子组件: {{m}}</h1>
                <button >子组件按钮</button>
                <slot></slot>
            </div>
        </template>
        <template id = "temp2">
            <div>
                <h1>子组件: {{m}}</h1>

            </div>
        </template>
    </body>
    <script>
        const com1 ={
            template: '#temp1',
            data(){
                return{
                    m:'我是子组件的值',
                    url:'123'
                }
            }
        }
        const com2 ={
            template: '#temp2',
            data(){
                return{
                    m:'我是子组件com2'
                }
            }
        }
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                msg:'我是父组件的值'
            },
            methods:{

            },
            components:{
                com1,com2
            }
        })
    </script>
</html>