前端框架vue.js系列（7）：父子组件参数变化传递规范

来源：互联网发布：国外数据库有哪些编辑：程序博客网时间：2024/05/16 11:06

父组件向子组件传参分两种数据类型：基础类型和引用类型。子组件通过props属性接收来自父组件的参数。请看下面Demo：

<my-component :itemobject="itemobject" :itembase="itembase"></my-component><script>Vue.component("my-component", {props: ["itembase", "itemobject"],template: '#pid'});var vue = new Vue({el: "#app",data: {itembase: "hello",itemobject: {id: "00001",name: "张三"}}});</script>

其中，itembase为基础类型，itemobject为引用类型。

绑定的props入参原理

基础类型：

props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外，每次父组件更新时，子组件的所有 props 都会同步更新为最新值。这意味着你不应该在子组件内部改变 props。如果你这么做了，Vue 会在控制台给出警告。如果你非要改变子组件的props又不想改变父组件的props，可以将props赋值给子组件data里的一个变量里，由子组件操作变量，如下：

props: ['childbase'],data: function () {  return {   mybase: this.childbase  }}

引用类型：

指向同一个内存空间，如果 props 是一个对象或数组，无论是在子组件还是父组件发生变化时，都会同步改变它的状态。

响应关系规范

依照vue设计原则，处理子组件和父组件的传参关系，规范写法是:

（1）父组件通过绑定props传递参数给子组件
（2）要改变子组件时，必须通过对父组件抛出改变事件，由父组件来驱动改变数值（父组件在插入自定义监听时不要加括号）
（3）若子组件想自行改变参数而不修改父组件参数（仅限于基础类型），则将props参数赋值给子组件自身的变量，渲染时仅渲染自身变量

参考Demo：

<body><div id="app"><my-component :itemobject="itemobject" :itembase="itembase" :childbase="childbase" :childobject="childobject" @disp-event="changeParame"></my-component></div></body><script type="text/x-template" id="pid"><div><p>String：{{itembase}}</p><p>Object：{{itemobject.name}}</p><p>String：{{mybase}}</p><p>Object：{{myobject.name}}</p><p>{{pop}}</p><button @click="changeParame();">click</button></div></script><script>Vue.component("my-component", {props: ["itembase", "itemobject", "childbase", "childobject"],template: '#pid',data: function() {return {mybase: this.childbase,myobject: this.childobject,pop: "没有更新"}},methods: {changeParame: function() {console.log("更新前：" + this.$el.textContent);this.$emit('disp-event', "李四"); //向父组件抛出事件this.pop = "更新完成";//$nextTick仅监听到本句代码前的变化值this.$nextTick(function() {console.log("更新后：" + this.$el.textContent);})}}});var vue = new Vue({el: "#app",data: {itembase: "hello",itemobject: {id: "00001",name: "张三"},childbase: "hello",childobject: {id: "00001",name: "张三"}},methods: {changeParame: function(name) {this.itembase = "i am change";this.itemobject.name = name;this.childbase = "i am change";this.childobject.name = name;console.log("更新中");}},filters: {},computed: {},components: {},watch: {}});</script>

运行结果：

（注）

1.Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。简而言之，data数值的变化不会马上渲染到界面中，如果你想要监听渲染成功，可使用this.$nextTick(function() {})。
2. Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值。即是说，你用到的所有vue变量都需要在data中进行定义。

阅读全文

0 0