Vuex是什么？
一般用于中大型项目，管理组件中的传值方式，相当于angular中的全局服务，里面有store声明的属性可以共享，每个组件都可以绑定。想要改变值，可以向store提交一个突变，方法便会执行一次。
父向子传值
1、child子组件对desc属性绑定的是sString,而sString的值是高渐离,故结果为: 显示父级传过来的值:高渐离。
注意:子组件要接收父组件传进来的值,那么一定要放在props中.在props中声明对应的属性（举例：desc），并进行属性绑定，绑定对应的变量（举例：sString）。
2、child子组件对students属性绑定的是oStudent，而oStudent的job属性为”杀手”,故输出的结果为”2、(父向子传值-对象方式)接收到父级传过来的值:杀手”。
3、对input标签进行双向绑定到sValue,sValue已经在父组件中声明.对szval进行监听,当其值改变的时候,在输入框输入内容时,对应的函数console.log(newValue);执行,控制台输出改变后的值.而在组件中的钩子函数created中,计时器改变其值为”李斯”。
子组件调用父组件的方法
子组件中的button按钮绑定点击事件useParent(),该useParent()方法在子组件的methods中声明,
在该方法中通过this.$parent.doParent(this.desc)调用父组件这个中的doParent()方法[功能console.log('父级中的方法',msg);],
而传入的参数desc绑定了sString,child子组件对desc属性绑定的是sString,而sString,的值是高渐离,因此:最终输出的结果为”父级中的方法 高渐离”。
代码示例（参考上面的分析理解代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父向子通信</title>
<style type="text/css">
#app {
border: slateblue 1px solid;
width: 480px;
margin: auto;
padding: 20px;
border-radius: 5px;
background: #f2f2f2;
}
#wrapper {
border: 1px solid red;
width: 450px;
margin: auto;
padding: 10px;
border-radius: 5px;
background: #f9f9f9;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>该部分为父组件</h1>
<h2>姓名：{{sString}}</h2>
<!-- 动态绑定 -->
<input type="text" v-model="sValue">
<!--v-bind:等价于:-->
<p>显示父级传入的值:{{oStudent.name}}</p>
<!-- 注意：desc，students，hou均为子组件中props中声明的属性；sString，oStudent，sValue均为父组件中声明的变量 -->
<child :desc="sString" :students="oStudent" :hou="sValue"></child>
</div>
</body>
</html>
<template id="child">
<div id="wrapper">
<h1>该部分为子组件</h1>
<!-- 注意：desc，students，hou均为子组件中props中声明的属性 -->
<p>1、显示父级传过来的值:{{desc}}</p>
<p>2、(父向子传值-对象方式)接收到父级传过来的值:{{students.job}}</p>
<p>3、显示父级中input标签动态输入的内容:{{hou}}</p>
<button @click="useParent">4、子组件调用父级中的方法</button>
</div>
</template>
<script>
// export default {};
let child = {
template: '#child',
data() {
return {};
},
methods: {
useParent() {
// 调用父级组件的方法
// $parent: 访问父级组件的实例 $root: 访问根实例 在本例中$parent与$root是一样.
this.$parent.doParent(this.desc);
}
},
// 组件中的钩子函数
// 1.created 当前组件实例创建好,但是页面没有显示
created() {
setInterval(() => {
// 注意:父向子是单向数据流变化,在子组件中的变化,不会影响到父组件
this.hou = '李斯';
// 1.传入的是引用,可以通过该对象改变属性的值,会影响父级.
// this.students.name = '盖聂';
// 2.传入的是值,不会影响父级
this.students = {
name: '嬴政',
job:'皇帝'
};
}, 5000);
},
// 可以是数组, 但是不严谨, 建议使用对象
// 注意:父向子是单向数据流变化,在子组件中的变化,不会影响到父组件
// 值传递（简单类型）/引用传递(array,object)
// 要想接收外部传进来的值,那么一定要放在props中
props: {
// 注意:写属性名的时候,建议不要写成驼峰命名法.写成驼峰命名时,在父级中调用需要写成小写-小写的形式.
hou: {
type: String
},
desc: {
type: String,
// default是可选的
default: '自己设置的默认值',
required: true
},
students: {
type: Object,
// 设置对象的默认值，需要使用工厂函数，返回默认值。
default: function () {
return {
name: '韩非',
age: 20
};
}
}
}
};
new Vue({
el: '#app',
components: {
child
},
data: {
sString: '高渐离',
oStudent: {
name: '卫庄',
job:'杀手'
},
sValue: ''
},
watch: {
sValue: function (newValue, oldValue) {
console.log(newValue);
}
},
methods: {
doParent(msg) {
console.log('父级中的方法', msg);
}
}
});
</script>
效果图
