• 局部组件的创建和使用


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

    <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>
  • 相关阅读:
    acm常见错误-持续更新
    学习之旅
    快速幂
    写个管理自我的小工具
    Tree构建
    Sql server学习
    asp.net webAPI学习
    AngularJS数据双向绑定
    虚拟机学习
    wps学习
  • 原文地址:https://www.cnblogs.com/nanjo4373977/p/12902863.html
Copyright © 2020-2023  润新知