Vue传值

1.父传子

父组件是通过props属性给子组件通信的
数据是单向流动父—>子（子组件中修改props数据，是无效的，会有一个红色警告）

只能从上到下

实现步骤

1.子组件在props中创建一个属性，用于接收父组件传过来的值；
2.父组件引入子组件–>注册子组件–>引用子组件；
3.在子组件标签中添加子组件props中创建的属性；
4.将所要传递的值赋值给该属性。

props接收的几种写法

1.直接使用 props 以一维数组的方式接收

props: ['childData']

2.接收字符串

props: {childData: String //这里指定了字符串类型，如果类型不一致会警告的哦
}

3.使用对象形式接收，并赋予默认值，但是在数组这里接收有问题，一个大坑，请看第四种

props: {childData: {type: String,default: '默认值' //接收数据时给定一个默认值 }
}

4.接收数组，是需要以函数形式接收

 props: {minetlist: {type: Array,default() {return []}}}

tpye支持以下数据类型：

String Number Boolean Array Object Date Function Symbol

props:{// 基础的类型检查（‘null’匹配任何类型）propA:Number,// 多个可能的类型propsB: [String,Number],// 必须的字符串propC: {type:String,required:true},// 有默认值的数字propD:{type:Number,default:100},// 有默认值的对象propE:{type:Object,// 对象或数组默认值必须从一个工厂函数获取default:function(){return {message:'hello'}}},// 自定义验证函数propF:{validator: function(value){// 这个必须匹配下列字符串中的一个return:['success','warning','danger'],indexof(value) !== -1}
}

`特别注意`:

所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。

代码演示

1 . 父组件parent.vue代码如下

 <template><div class="parent"><h2>{{ msg }}</h2><son :sonMsg="msg"></son> <!-- 子组件绑定msg变量--></div></template><script>import son from './Son' //引入子组件export default {name: 'parent',data () {return {msg: '父组件数据',}},components:{son},}</script>

2 . 子组件son代码如下

 <template><div class="son"><p>{{ Msg }}</p><p>子组件接收到内容：{{sonMsg}}</p></div></template><script>export default {name: "son",data(){return {Msg:'子组件',}},props: {                    //接收sonMsg值sonMsg: {type: String,default: '子组件默认值' }}}
</script>

vue组件传参(父传子)相关推荐

Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
Vue组件通信：父传子、子传父、跨组件通信
方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...
vue组件通信：父与子、子与父
父与子.子与父通信 1. 组件通信 1.1 组件嵌套 1.2 组件嵌套步骤 1.3 父与子.子与父通信 1.4 实现案例图示 2. 父组件与子组件通信 2.1 父与子通信 2.2代码实现父与子及详细说 ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
vue组件通信：父传子—子传父
我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频我看到了弹幕上说很多人在这一块不理解:下面我就来写分享以下我的课程总结父传子为什么要进行"传& ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
react 子传参父_react子父传参有几种方法？
react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react父子组件传参(值)的几种方法一 ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...

vue组件传参(父传子)

Vue传值

1.父传子

`特别注意`:

代码演示

vue组件传参(父传子)相关推荐

最新文章

热门文章

vue组件传参(父传子)

Vue传值

1.父传子

特别注意:

代码演示

vue组件传参(父传子)相关推荐

最新文章

热门文章

`特别注意`: