父组件向子组件传值

传值步骤

① 子组件在 props中创建一个属性，用以接收父组件传过来的数据；

② 父组件中注册子组件。通过属性绑定（ v-bind:）的形式，把需要传递给子组件的数据传递到子组件的内部，供子组件使用；

③ 在子组件标签中添加子组件 props中创建的属性；

④ 把需要传给子组件的值赋给该属性

代码示例

<body><div id="app"><!-- 子组件向父组件传值  --><counter :count="1"></counter><counter :count="2"></counter></div><script>// 定义一个局部组件var counter = {props:["count"],template: "<div @click='HandleClick'>{{count}}</div>",methods: {HandleClick:function(){// 修改了父组件中的count值（不建议），子组件不能修改从父组件传递过来的值this.count ++ }},}var vm = new Vue({el:"#app",components:{counter:counter}})</script>
</body>

父组件可以修改传给子组件的值，但是子组件不能修改从父组件传递过来的值，因为可能会有其他组件共用这个值，因此Vue会报[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "count"的警告错误。
`

解决的方法：子组件可以将这个组件拷贝出来后操作拷贝值，最终的代码示例

<body><div id="app"><!-- 子组件向父组件传值  --><counter :count="1"></counter><counter :count="2"></counter></div><script>// 定义一个局部组件var counter = {props:["count"],data() {return {//子组件需要将父组件拷贝出来后操作拷贝值number: this.count}},template: "<div @click='HandleClick'>{{number}}</div>",methods: {HandleClick:function(){// 修改了父组件中的count值（不建议），子组件不能修改从父组件传递过来的值this.number ++ }},}var vm = new Vue({el:"#app",components:{counter:counter}})</script>
</body>

子组件向父组件传值

子组件传值给父组件流程：

1.子组件绑定事件
2.子组件的事件处理函数中通过$emit()向外触发事件，可携带参数
3.父组件监听子组件触发的事件
4.在父组件的事件处理函数中拿到子组件传递的参数，处理子组件的请求

子组件对自己无法操作的数据向父组件抛出请求（通过$emit()向外触发事件），这个请求中可携带相关数据，等待父组件接收这个响应然后自行处理这个请求后更新的数据重新被传递给子组件。

代码示例

=<body><div id="app"><!-- 子组件向父组件传值  父组件监听子组件触发的事件--><counter :count="3" @change="HandleChange"></counter><counter :count="2" @change="HandleChange"></counter><div>{{total}}</div></div><script>// 定义一个局部组件var counter = {props:["count"],data() {return {//子组件需要将父组件拷贝出来后操作拷贝值number: this.count}},template: "<div @click='HandleClick'>{{number}}</div>",methods: {HandleClick:function(){// 修改了父组件中的count值（不建议），子组件不能修改从父组件传递过来的值this.number = this.number + 2// 子组件向父组件$emit()向外触发事件，可携带参数this.$emit("change",2)}},}var vm = new Vue({el:"#app",components:{counter:counter},data:{total:5},methods:{// 在父组件的事件处理函数中拿到子组件传递的参数，处理子组件的请求HandleChange:function(step){this.total += step}}})</script>
</body>

总结：父组件向子组件传值用私有的data数据拷贝props数据，再操作data来实现。子组件传值给父组件一共四个流程。

在组件传值过程中，无论是父传子、还是子传父，它们都有一个共同点就是有一个中间介质。父传子的介质是 props中的属性，子传父的介质是自定义事件。

父子组件的关系可以总结为props向下传递，事件向上传递。父组件通过props给子组件下发数据，子组件通过事件给父组件发送信息。

父组件通过 v-bind:绑定参数传给子组件，子组件通过 props接收这个参数。
在组件的最底层开始写事件，由最底层组件逐步向上$emit事件流，并携带相应参数，最后在父组件内完成总的数据处理。

组件参数校验

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

<body><div id="app"><!-- :content="js表达式"  content="" 字符串比如:content="123“ 是数字content="123"是字符串--><Child content="Hello world"></Child></div><script>Vue.component("Child",{// props可以用数组，也可以用对象// props: ['content'],props:{// 对content进行约束Number 如果约束是Number或者String，content: [Number,String]// content:Number// 在content中还有validator 复杂校验规则，自定义校验器content:{type:String,// 如果type不是String，默认是defaultrequired:false,default:"如果type不是String，默认是default",validator:function(value){//复杂校验规则，自定义校验器return (value.length>5)}                                }},template:"<div>{{content}}</div>"})var vm = new Vue({el: "#app",})</script>
</body>

参考资料：

慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
https://mp.weixin.qq.com/s/yvt9mnQwcydUgg3QqdaWeA

后言

据说，放张小姐姐觉得照片可以提高阅读量，图是来源学校的2020新生。

这个时代做什么事，门槛都变得好高，想当个宅男，你买得起房子吗？看看学校的新生，养下眼，这种白日梦不要做！

六十一、Vue中父子组件传值和组件参数校验相关推荐

vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
Vue中父子组件的六种通信方式
Vue中父子组件的通信方式一.Props + $emit Props:父传子父组件Parent.vue: <Child :message="message" @chang ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
41. Vue组件传值-父组件向子组件传值
前言前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
Vue组件传值——兄弟组件传值
兄弟组件传值兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递. 1. 声明事件给组件实例(或Vue实例) 声明事件有两种方式: 直接声明通过$on实现给组件 ...

六十一、Vue中父子组件传值和组件参数校验

文章目录

父组件向子组件传值

子组件向父组件传值

组件参数校验

后言

六十一、Vue中父子组件传值和组件参数校验相关推荐

最新文章

热门文章