Vue props用法详解(小结)

来源：动视网责编：小采时间：2020-11-27 22:12:01

Vue props用法详解(小结)

Vue props用法详解(小结):Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为： props down, events up 父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。父子级组件比如我们需要创建两个组件

推荐度：

点击下载本文 文档为doc格式

导读Vue props用法详解(小结):Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为： props down, events up 父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。父子级组件比如我们需要创建两个组件

修改 props 数据

通常有两种原因：

prop 作为初始值传入后，子组件想把它当做局部数据来用
prop 作为初始值传入后，由子组件处理成其他数据输出

应对办法是

定义一个局部变量，并用 prop 的值初始化它

但是由于定义的 ownChildMsg 只能接受 forChildMsg 的初始值，当父组件要传递的值变化发生时，ownChildMsg 无法收到更新。

let childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="forChildMsg"/>
 </div>
 <p>{{forChildMsg}}</p>
 <p>ownChildMsg : {{ownChildMsg}}</p>
 </div>`,
 props: {
 "for-child-msg": String
 },
 data() {
 return { ownChildMsg: this.forChildMsg };
 }
};

这里我们加了一个<p>用于查看 ownChildMsg 数据是否变化，结果发现只有默认值传递给了 ownChildMsg，父组件改变只会变化到 forChildMsg，不会修改 ownChildMsg。

定义一个计算属性，处理 prop 的值并返回

由于是计算属性，所以只能显示值，不能设置值。我们这里设置的是一旦从父组件修改了 forChildMsg 数据，我们就把 forChildMsg 加上一个字符串"---ownChildMsg"，然后显示在屏幕上。这时是可以每当父组件修改了新数据，都会更新 ownChildMsg 数据的。

let childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="forChildMsg"/>
 </div>
 <p>{{forChildMsg}}</p>
 <p>ownChildMsg : {{ownChildMsg}}</p>
 </div>`,
 props: {
 "for-child-msg": String
 },
 computed: {
 ownChildMsg() {
 return this.forChildMsg + "---ownChildMsg";
 }
 }
};

更加妥帖的方式是使用变量存储 prop 的初始值，并用 watch 来观察 prop 值得变化。发生变化时，更新变量的值。

let childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="forChildMsg"/>
 </div>
 <p>{{forChildMsg}}</p>
 <p>ownChildMsg : {{ownChildMsg}}</p>
 </div>`,
 props: {
 "for-child-msg": String
 },
 data() {
 return {
 ownChildMsg: this.forChildMsg
 };
 },
 watch: {
 forChildMsg() {
 this.ownChildMsg = this.forChildMsg;
 }
 }
};

Vue props用法详解(小结)

推荐度：

点击下载本文 文档为doc格式

标签： VUE 总结 props

热门焦点

Vue props用法详解(小结)

Vue props用法详解(小结)

Vue props用法详解(小结)

最新推荐

猜你喜欢

热门推荐