父组件向子组件传参分两种数据类型：基础类型和引用类型。子组件通过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中进行定义。
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
