标签：`` 分享图片 The pre dev ons device 图片 doctype
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app1"> <!-- 全局组件是共用的 --> <zjm></zjm> </div> <hr> <div id="app2"> <!-- 多次调用 --> <zjm></zjm> <zjm></zjm> </div> <script> // 全局组件 Vue.component("组件的名称"，{template: ``}) Vue.component("zjm", { template: `<div><h1>这是组件</h1></div>`, }); const app = new Vue({ // 作用域1 el: "#app1", }) const app2 = new Vue({ // 作用域2 el: "#app2" }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <jbzj></jbzj> </div> <script> // 定义局部组件 let zjm = { template: `<div> <h1>{{name}}</h1> <button @click="my_click">点击666</button> </div>`, data: function () { return { name: "我是局部组件" } }, methods: { my_click: function () { alert(666) } } }; const app = new Vue({ el: "#app", components: { // 注册局部组件 jbzj: zjm, } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <father></father> </div> <script> let zzj = { template: `<div><h2>这是子组件</h2></div>`, }; let fzj = { template: `<div> <h1>这是父组件</h1> <child></child> </div>`, components: { child: zzj, // 注册子组件 } }; const app = new Vue({ el: "#app", components: { father: fzj // 注册父组件 } }) </script> </body> </html>
标签：`` 分享图片 The pre dev ons device 图片 doctype
原文地址：https://www.cnblogs.com/c-x-m/p/9837588.html
