今天所学心得、笔记

1、父组件，向子组件传参

  1. <div id="app">
  2.     <h2>{{pmsg}}</h2>
  3.     <title-item title="父组件静态传值"></title-item>
  4.     <title-item :title="ptitle" content="示例传多个值，这个采用静态传值"></title-item>
  5. </div>
  6. <script src="vue.js"></script>
  7. <script>
  8.     const vm = new Vue({
  9.         el: "#app",
  10.         data() {
  11.             return {
  12.                 pmsg: "这是来自父组件的数据",
  13.                 ptitle: "父组件，动态传的值...",
  14.             }
  15.         },
  16.         components: {
  17.             titleItem: {
  18.                 props: ["title","content"],
  19.                 data() {
  20.                     return {
  21.                         smsg: "子组件数据...",
  22.                     };
  23.                 },
  24.                 template:`<h3>{{smsg +"---"+ title +"---"+ content}}</h3>`,
  25.             }
  26.         }
  27.     })
  28. </script>

2、子组件，向父组件传参

  1. <div id="app">
  2.     <h2 :style="{fontSize: fontSize + 'px'}">{{pmsg}}</h2>
  3.     <title-item @enlarge-text="handle($event)"></title-item>
  4. </div>
  5. <script src="vue.js"></script>
  6. <script>
  7.     const vm = new Vue({
  8.         el: "#app",
  9.         data() {
  10.             return {
  11.                 pmsg: "这是来自父组件的数据",
  12.                 fontSize: 10,
  13.             }
  14.         },
  15.         methods: {
  16.             handle(ev) {
  17.                 this.fontSize += ev;
  18.             }
  19.         },
  20.         components: {
  21.             titleItem: {
  22.                 template:`<button @click="$emit('enlarge-text', 5)">放大父组件字体</button>`,
  23.             }
  24.         }
  25.     })
  26. </script>

3、父子组件，双向传参

  1. <div id="app">
  2.     <h3>{{titelText}}</h3>
  3.     <h3>点击了 {{count}} 次</h3>
  4.     <br>
  5.     <btn-inc :count="count" @count-add="handle($event)"></btn-inc>
  6. </div>
  7. <script src="vue.js"></script>
  8. <script>
  9. const vm = new Vue({
  10.     el: '#app',
  11.     data() {
  12.         return {
  13.             titelText: "组件之间，双向传值......",
  14.             count: 0,
  15.         }
  16.     },
  17.     methods: {
  18.       handle(event) {
  19.          this.count += event;
  20.       }
  21.     },
  22.     components: {
  23.         btnInc: {
  24.             props: ["count"],
  25.             template:`
  26.                 <button @click="$emit('count-add', 10)">点击了 {{count}} 次</button>
  27.             `,
  28.         }
  29.     }
  30. })
  31. </script>

更多相关文章

  1. [计算机视觉论文速递] 2018-04-28
  2. [计算机视觉论文速递] 2018-05-19
  3. Day_1_1.25-php数据类型与检测
  4. 0126-数据类型的转换与检测技术,变量与常用声明及使用
  5. MySQL的增强型语法高亮终端-MyCli
  6. Java访问数据库之JDBC实现方式
  7. 数据类型的转换、变量与常量声明和使用
  8. 示例演示:数据类型的转换和检测技术、变量与常量的方式以及使用
  9. docker基本操作

随机推荐

  1. android ExpandableListView ExpandableL
  2. pandaboard ES学习之旅——4 Android源代
  3. Android 中文 API （29） ―― CompoundButto
  4. 跟着做 Android NDK学习入门如此简单（二）
  5. android数据存取的四种方式
  6. 在activity中调用Application 出现androi
  7. Android——编译release版签名系统
  8. Android开发书籍和教程
  9. android模拟器介绍和基本使用
  10. 使用GDB调试Android(安卓)Native Lib