局部组件的创建和使用

使用局部组件的打油诗：创子、挂子、用子

<body>
    <div id="app">
        <!-- 3.使用子组件 -->
        <App></App>
    </div>
    <script>
        //App组件包括html+css+js

        //1.创建组件
        //注意：在组件中这个data必须是一个函数，返回一个对象
        const App = {
            data() {
                return {
                    msg: '我是App组件'
                }
            },
            template: `
                <div>
                    <h3>{{msg}}</h3>
                    <button @click = "handleClick">按钮</button>
                </div>
                
            `,
            methods: {
                handleClick() {
                    this.msg = "修改局部组件";
                }
            },
            computed: {

            },
        }

        new Vue({
            el: '#app',
            data: {

            },
            components: {
                //2.挂载子组件
                App
            }
        })
    </script>
</body>

 

posted @ 2020-05-16 23:31  南啾  阅读(310)  评论(0)    收藏  举报