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