前端框架vue.js系列（7）：数据传递规范

淡淡的烟草味﹌ 2021-09-14 06:26 257阅读 0赞

父组件向子组件传参分两种数据类型：基础类型和引用类型。子组件通过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>

运行结果：

![Center][]

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

[Center]: /images/20210813/3e5806c77ad04911a359e16ef38275f2.png