vue组件传值

父传子组件

父组件传递数据

<hello-demo :mes-father="mesFather"></hello-demo>

import HelloDemo from './components/HelloDemo'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { HelloDemo }, 
  data() {
   return {
        'mesFather':'message from father，我是来自父组件的数据'
      }
    }
  }

子组件接收数据

    在HelloDemo.vue 中, export default 后面的对象中,添加一个字段props, 它是一个数组, 专门用来接收父组件传递过来的数据. props: ["mesFather"], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应。

  export default{
    props:['mesFather']
    //或
    //props: {
	//    mesFather: {    
	//      type: String,
	//      required: true,   //必填
	//      default: ''  // 默认值
	//    }
    //}
  }

在js 文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue 做了一个转化，如果在组件中属性是 - 表示，它 自动会转化成驼峰式。  传进来的数据是mes-father, 转化成mesFather, 我们在js 里面写mesFather, 一一对应，子组件可以接受到组件。

子传父组件

子组件发射事件和传输数据

HelloDemo.vue

<template>
  <div style="margin: 10px;border: 1px solid red;padding: 10px;background: rgba(0,0,0,0.3)">
    <h1>Hello页面</h1>
    <p>{{message}}</p>
    <p>{{mesFather}}</p>
    子组件输入框：<input type="text" placeholder="请输入..." v-model="inputValue" v-on:keypress.enter="enterFn"/>
    输入元素伪：{{inputValue}}
  </div>
</template>
<script>
  export default{
    props:['mesFather'],
    data(){
      return {
        message:'我是Hello本页面展示信息',
        inputValue:''// 添加inputValue,用户输入绑定到inputValue变量，从而获取用户输入
      }
    },
    methods:{
      enterFn(val){
        this.$emit('valueUp',this.inputValue);
        //子组件发射自定义事件valueUp, 并携带要传递给父组件的值
        //如果要传递给父组件很多值，这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather);
      }
    }
  }
</script>

APP.vue

<!--添加自定义事件valueUp-->
<hello-demo :mes-father="mesFather" v-on:valueUp="recieve"></hello-demo>
<!-- p元素，用于展示子组件传递过来的数据 -->
<p>子组件传递过来的数据 {{childMes}}</p>

import HelloDemo from './components/HelloDemo'
export default{
  name: 'App',
  data(){
    return {
      'mesFather':'message from father，我是来自父组件的数据',
      childMes:''
    }
  },
  components: {HelloDemo},
  methods:{
    recieve(mes){
      // recieve 事件需要设置参数，这些参数就是子组件传递过来的数据，因此，参数的个数，也要和子元素传递过来的一致。
      this.childMes = mes;
    }
  }
}
3.//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }

4.兄弟组件
项目中创建一个单独的VueEvent .js文件

import Vue from 'vue'
export default new Vue;

A页面
import VueEvent from './VueEvent .js'

// 在要触发的函数里写上这段
DataToPageB() {
	VueEvent.$emit('名称', data)
	console.log('传递的数据：', data)
}

B页面
import VueEvent from './VueEvent.js'

mounted() {
   VueEvent.$on('名称', (val) => {
     console.log('接收的数据：', val)
   })
 }

销毁
VueEvent.$off('名称')

$parent / $children与 ref

子组件
this.$parent.方法/变量

父组件
this.$refs.组件名.方法/变量

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例
1、ref为子组件指定一个索引名称，通过索引来操作子组件；
2、this.$parent 可以直接访问该组件的父实例或组件；
3、父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。

root 和parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过root 访问得到的是根父组件

<custom v-model='something'></custom>
约等于
<custom :value="something" @input="value => { something = value }"></custom>

$attrs/listeners

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

provide与inject

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

vuex

事件总线