Vue初学教程之组件数据传递

一.组件的使用

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
})


  

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

data: function () {
  return {
    count: 0
  }
}

1.组件数据传递不同于Vue全局的数据传递，组件实例的数据作用域是孤立的;
2.孤立并不仅仅在组件内独立，而且是指上下层之间的数据隔离，即不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件，就需要使用props属性。这是父组件用来传递数据的一个自定义属性

二.组件数据流向

在Vue中，父子组件的关系 【prop向下传递，事件向上传递】。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息
单向数据流：prop是单向绑定的，当父组件的属性变化时，将传给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解

三.Prop使用

1.由于HTML特性不区分大小写，在子组件定义prop时，使用了驼峰式大小写（camelCase）命名法
2.驼峰式大小写的prop用于特性时，需要转为短横线隔开（kebab-case）。例如，在prop中定义的myName，在用作特性时需要转换为my-name
3.如果使用字符串模板，那么这个限制就不存在
语法：
1.在父组件使用子组件时，通过以下语法将数据传递给子组件
2.其实相当于v-bind，也就是Vue中的v-bind指令。这是属于动态绑定，让它的值被当作JavaScript表达式计算

let parent = new Vue ({
    // ...
    components: {
        'child': {
            props: ['myName','myJob'] // 在 JavaScript 中是 camelCase 的
            // ...
        }
    }
});



    

把Vue实例 parent 当作组件child的父组件。如果我们想要使用父组件的数据，则必须先在子组件中定义props，即：props:['myName', 'myJob']

//建一个子组件child，并且在Vue的实例中定义了data选项
let parent = new Vue ({
    el:"#app",
    data () {
        return {
            name: 'WEBING',
            job: 'front-end-development'
        }
    },
    components: {
        'child': {
            template: '#child',
            props: ['myName','myJob']
        }
    }
});

定义child组件的模板:

将父组件parent的data通过已定义好的props属性传递给子组件

效果如下：

效果

四.Prop绑定类型

A单向绑定
数据单向流动:
只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接受组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据
示例：
1.修改父组件的数据将会影响子组件，子组件的数据也会对应的修改
2.修改子组件数据并不会影响父组件的数据

    

        
父组件Parent数据
        

            

                姓名
                {{ name }}
                
            
            

                工作
                {{ job }}
                
            
        
    
    





let parent = new Vue({
  el: '#app',
  data () {
    return {
      name: 'WEBING',
      job: 'FE'
    }
  },
  components: {
    'child': {
      template: '#child',
      props: ['myName', 'myJob']
    }
  }
})

prop默认是单向绑定 【当父组件的属性变化时，将传给子组件，但反过来不会。这是为了防止子组件无意修改了父组件的状态】
B双向绑定