使用局部组件的打油诗:创子、挂子、用子
<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>