博客提及组件使用注意点，强调左边要写字符串，还给出了转载来源链接。
组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>组件</title></head><body> <div id="app"> <component :is='who'></component> <button @click='changeComponent'>修改组件</button> </div> <script src="../js/vue.js"></script> <script> var componentA = { template: ` <div style="color: red" >我是A组件</div> `, }; var componentB = { template: ` <div style="color: red" >我是B组件</div> `, }; var componentC = { template: ` <div style="color: red" >我是C组件</div> `, }; var app = new Vue({ el: "#app", data: { who: "componentA", }, components: { 'componentA': componentA, 'componentB': componentB, 'componentC': componentC, }, methods: { changeComponent: function () { if (this.who == 'componentA') { this.who = 'componentB' } else if (this.who == 'componentB') { this.who = 'componentC' } else { this.who = 'componentA' } } }, }) </script></body></html>复制代码注意点：
components: { 'componentA': componentA, 'componentB': componentB, 'componentC': componentC, },复制代码左边要写 字符串
扫一扫
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
