随笔分类 - 组件化开发
摘要：methods: { itemClick() { this.$router.push(this.path).catch(err => err); } } 在点击事件后面加 catch( err => err) 重复点击后就 不会再报错了
阅读全文
摘要：<body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <ccpn></ccpn> <h3>我是子组件</h3> <button @click="btnClick">按钮</button> </div> </templat
阅读全文
摘要：<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn ref="aaa"></cpn> <button @click="btnClick">点击</button> </div> <template id="cpn"> <div> <h3>我是子组件</
阅读全文
摘要：<body> <div id="app"> <!-- 2.监听子组件发射的事件 然后再父组件处理事件 --> <cpn @itemclick="cpnClick"></cpn> </div> <template id="cpn"> <div> <button v-for="item in categ
阅读全文
摘要：<body> <!-- 父组件模板 --> <div id="app"> <!-- 如果属性名有 大写 要换小写 并用 - 隔开 如下 --> <cpn :cinfo="info" :child-my-message="message"></cpn> </div> <!-- 子组件模板 --> <t
阅读全文
摘要：<body> <div id="app"> <!-- 组件的变量名不能有大写 会报错 --> <cpn :cmessage="message" :clis="lis"></cpn> </div> <template id="cpn"> <div> <p> {{ cmessage }} </p> <u
阅读全文
摘要：<body> <div id="app"> <cpn1></cpn1> </div> <template id="cpn1"> <div> <!-- <h2> {{ title }} </h2> 组件内部不能访问 Vue实例对象里面的数据的 如果要动态绑定数据 要在注册组件内部调用里面的 data数
阅读全文
摘要：<body> <div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> </body> <!-- 方法 1 --> <!-- 组件和模板分离写法 写在script标签里面 类型是 x-template --> <script type="x-template
阅读全文
摘要：<body> <div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> // 组件的语法
阅读全文
摘要：<body> <div id="app"> <cpn2></cpn2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> const cpnC1 = Vue.exte
阅读全文
摘要：<body> <div id="app"> <cpn></cpn> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> const cpnC = Vue.extend(
阅读全文
摘要：<body> <div id="app"> <!-- 3.使用组件 --> <my-cpn></my-cpn> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> //
阅读全文
浙公网安备 33010602011771号