vue组件之间传递数据之prop&$emit

vue项目开发，组件之间传递数据

1. 兄弟组件
   兄弟组件之间传输数据，用vuex的store方式。
2. 父子组件
   父子组件之间传输数据，用vue的prop & $emit方式。

通过 Prop 向子组件传递数据

一，传递数据

1，这种方式只能由父向子传递，子组件不能更新父组件内的data

子组件.vue
先定义一个子组件，在组件中注册props

<template>
    <div>
        <div>{{message}}(子组件)</div>
    </div>
</template>
<script>
export default {
    props: {
        message: String  //定义传值的类型<br>    
    }
}
</script>
<style>
</style>

父组件.vue
在父组件中，引入子组件，并传入子组件内需要的值

<template>
    <div>
        <div>父组件</div>
        <child :message="parentMsg"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child组件
export default {
    data() {
            return {
                parentMsg: 'a message from parent'  //在data中定义需要传入的值
            }
        },
        components: {
            child
        }
}
</script>
<style>
</style>

2，props 传入单数据

父组件.vue

<template>
  <div id="app">
      <h1>{{title}}</h1>
      <child message="我是child传递的数据prop"></child>
  </div>
</template>
<script> 
import Vue from 'vue';
Vue.component('child', {
  // 声明 props,通过这种方式定义的子组件可以不用在components文件中创建子组件文件，
  //模板定义的就是子组件内容???
  props: ['message'],
  template: '<span>我是父组件的模板数据 : {{ message }}</span>'
})
export default {
  name: 'app',
  data: function () {
    return { 
      title: '使用 Prop 传递数据'
    } 
  }
}
</script>

3，props 传入多个数据

如果在父组件的模板类添加其他元素或者字符会有：

①在最前面加入—每个子组件渲染出来都会在其前面加上
②在最后面加入—每个子组件渲染出来都会在其后面加上
③在中间加入—他前面子组件后面加上，后面的子组件后面加上

script

html

web页面

注意：camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

二，动态prop

要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

<template>
  <div id="app">
      <input v-model="parentMsg">
      <br>
      <child v-bind:my-message="parentMsg"></child>
  </div>
</template>
<script> 
import Vue from 'vue';
export default {
  name: 'app',
  data: function () {
    return { 
      title: '使用 Prop 传递数据',
      parentMsg: 'Message from parent'
    }
    
  },
  components: {
    child: {
      props: ['myMessage'],
      template: '<span>{{myMessage}}</span>'
    }
  }
}
</script>

三，表达式计算，传递值

如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算

<comp v-bind:some-prop="1"></comp>

<template>
  <div id="app">
    <p>{{tle1}}:<comp total="123+456"></comp></p>
    <p>{{tle2}}<comp :total="123+456"></comp></p>
    
  </div>
</template>
<script> 
import Vue from 'vue';
Vue.component("comp", {
    props: ["total"],
    template: "<span>total: {{total}}</span>",
});
export default {
  name: 'app',
  data: function () {
    return { 
      tle1: '这里传递是字符串',
      tle2: '用了v-bind动态语法，传递值会通过js的表达式计算，得到个值：'
    } 
  }
}
</script>

四，Prop类型绑定

prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

五，prop验证？？？

参考链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/77567096

$emit

子组件可以使用 $emit 触发父组件的自定义事件。