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>
效果图