vue 组件传值

一、父传子

1.分发事件props和$emit(方法1)

<!--父组件-->
<child :msg="msg" ></child>

//父组件
 data() {
    return {
      msg: "父组件的值",
    };
  },

<!--子组件-->
<div>{{msg}}</div>

//子组件
 props: {
	msg：{
		type：string,
		default:"默认"
	}
},

2.$ listeners和$ attrs(方法2)

<!--父组件-->
<child :msg="msg" :name="name" @send="send"></child>

//父组件
 data() {
    return {
      msg: "父组件的值1",
      name: "父组件的值2"
    };
  },
   methods: {
 	 send(val) {
      this.msg = val;
    }
   }

<!--子组件-->
<div>{{msg}}</div>
<div>
<button @click="update">子改父</button>
</div>

//子组件
 props: {
	msg：{
		type：string,
		default:"默认"
	}
},
 data() {
    return {
      title: "子组件的值",
    };
  },
methods: {
	//子改父
    update() {
      this.$listeners.send(this.title)
    }
  },
 mounted() {
    console.log(this.$listeners.msg.fns); //接收父组件传过来的值
    console.log(this.$attrs)//接收非prpos接收的参数(打印name)
  },

3.总线传值$ bus(方法3)组件通用

src下面建一个bus文件，下面创建index.js
bus/index.js

import Vue from 'vue';
const bus = new Vue();
export default bus;

main.js

import bus from './bus';
Vue.prototype.$bus=bus;

任意传值组件

  data() {
    return {
      cont: "改变之后"
    };
  },
this.$bus.$emit("goto", this.cont);

任意接收组件

 data() {
    return {
      far : "改变之前"
    };
  },
 this.$bus.$on("goto", data => {
      this.far = data;
    });

4.provide和inject(方法4)

<script>
//父组件
import helloworld from "../components/HelloWorld";
 provide() {
    return {
    msg: "provide数据",
      fns() {
        console.log(111);
      }
    };
  },
  </script>

<!--子组件-->
 <div>{{ msg }}</div><!--父组件的msg-->

//子组件
<script>
 inject: ["msg","fns"],
  mounted() {
    this.fns();//父组件方法
    }	
 </script>

5.本地存储(方法5)

6.vuex(方法6)

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  namespaced: true,//开启命名空间，这个文件是单独的一个vuex模块
  state: {},//驱动应用的数据源;相当于data;
  mutations: {}, //相当于methods方法
    //所有的请求都写在actions里,响应在 view 上的用户输入导致的状态变化。
    // actions里面的方法可以传两个参数  一个参数是整个store(vuex对象)
    //第二个参数是请求的参数params			   
  actions: {},//异步提交mutations
  getters:{},//相当于computed(计算属性)
  modules: {}//模块
});

7.子组件修改父组件$ parent(方法7)

//父组件
data() {
    return {
      name : "改变之前"
    };
  },

//子组件
//直接获取到父组件实例
update(){
	this.$parent.name="改变之后"
  }

8.子组件修改父组件 .sync(方法8)

<!--父组件-->
<child :msg.sync="msg" ></child>

//父组件
 data() {
    return {
      msg: "父组件的值",
    };
  },

//子组件
 data() {
    return {
      msg: "子组件的值",
    };
  },
methods: {
	//子传父
    update() {
      this.$emit(update:"msg",this.msg)
    }
  },

二、子传父

1.分发事件$emit(方法1)

<!--子组件-->
<div>
	<button @click="update">子传父</button>
</div>

data() {
    return {
      msg: "子组件的值",
    };
  },
//子组件
methods: {
	//子传父
    update() {
      this.$emit("send",this.msg)
    }
  },

<!--父组件-->
<child :msg="msg" :></child>

data() {
    return {
      cont: "改变之前"
    };
  },
//父组件
msg(val){
	this.cont=val
}

2.总线传值$ bus(方法2)组件通用

$bus (同上)

3.本地存储(方法3)

4.作用域插槽(方法4)

作用域插槽，主要是为了在父组件中访问子组件中的数据而提出来的一种方案，
子组件可以通过插槽的方式传值给父组件

子组件传：

<div>
   <slot name="action" :msg='msg'></slot>
</div>

 data () {
     return {
       msg: '我是子组件的数据'
     }
   },

父组件接收：
scope代表整个作用域插槽，是一个形参.

<child>
   //scope代表整个作用域插槽 是一个对象，scope返回的值是slot标签上返回的所有属性值。
   //v-alot等同于#
      <template v-slot:action='scope'>
        {{scope.msg}}
      </template>
 </child>

5.vuex(方法5)

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  namespaced: true,//开启命名空间，这个文件是单独的一个vuex模块
  state: {},//驱动应用的数据源;相当于data;
  mutations: {}, //相当于methods方法
    //所有的请求都写在actions里,响应在 view 上的用户输入导致的状态变化。
    // actions里面的方法可以传两个参数  一个参数是整个store(vuex对象)
    //第二个参数是请求的参数params			   
  actions: {},
  modules: {}//模块
});

6.父组件修改子组件的值$ ref(方法6)

//父组件
this.$ref.children.msg="改变之后"

 data () {
     return {
       msg: '我是子组件的数据'
     }
   },

7.父组件修改子组件的值$ children(方法7)

//父组件
this.$children[0].msg="改变之后"

 data () {
     return {
       msg: '我是子组件的数据'
     }
   },