1 父组件给子组件传值

组件中通过props属性传递数据

  1. <body>
  2.     <div id="app">
  3.         <zj_all></zj_all>
  4.     </div>
  6.     <script>
  7.         var zj_a = {
  8.             template: '<div>局部组件定义 {{age}} {{pos}}</div>',
  9.             data: function(){
  10.                 return {age: 18};
  11.             },
  12.             // 在子组件a中通过props属性定义接受值的名称
  13.             props: ['pos']
  14.         }
  15.         Vue.component(
  16.             'zj_all',
  17.             {
  18.                 // 在父组件中指定子组件中的pos接收父组件的哪个数据
  19.                 template: '<div>全局组件定义 <zj_a :pos="name"></zj_a></div>',
  20.                 // 注册局部组件
  21.                 components:{
  22.                     zj_a
  23.                 },
  24.                 // 组件定义绑定数据
  25.                 data: function(){
  26.                     return {name: 'itcast'};
  27.                 }
  28.             }
  29.         )

image.png

2 子组件给父组件传值

通过$emit将数据传递个父组件

  1. <body>
  2.     <div id="app">
  3.         <zj_all></zj_all>
  4.     </div>
  6.     <script>
  7.         var zj_a = {
  8.             template: '<div>局部组件定义 {{age}} {{pos}} <button @click="upload">上传</button></div>',
  9.             data: function(){
  10.                 return {age: 18};
  11.             },
  12.             // 在子组件a中通过props属性定义接受值的名称
  13.             props: ['pos'],
  14.             // 定义方法, 传值给父组件
  15.             methods: {
  16.                 upload: function(){
  17.                     this.$emit('aabbcc', this.age);
  18.                 }
  19.             }
  20.         }
  21.         Vue.component(
  22.             'zj_all',
  23.             {
  24.                 // 在父组件中指定子组件中的pos接收父组件的哪个数据
  25.                 template: '<div>全局组件定义 <zj_a :pos="name" @aabbcc="show"></zj_a></div>',
  26.                 // 注册局部组件
  27.                 components:{
  28.                     zj_a
  29.                 },
  30.                 // 组件定义绑定数据
  31.                 data: function(){
  32.                     return {name: 'itcast'};
  33.                 },
  34.                 methods: {
  35.                     show: function(foo){
  36.                         alert(foo);
  37.                     }
  38.                 }
  39.             }
  40.         )

image.png