14-父子组件通讯，父传子（props）

<!DOCTYPE html>
<html><head><script src="./js/vue.min.js"></script><meta charset="utf-8"><title></title></head><body><div id="app"><cpn :cmovies = 'movies'></cpn> <!--第三步绑定父组件的数组并在组件中调用   V-bind：cmovies--></div><template id="cpn"><div><ul><li v-for="item in cmovies" style="list-style: none;">{{item}}</li></ul></div></template><script>// 父传子 : propsconst app = new Vue({el:'#app',data(){return{movies:['1312','321','512521']}},// 第一步创建子组件components:{'cpn':{template:'#cpn',props:['cmovies']    //第二步输入父传子的props,并定义参数}}})</script></body>
</html>

关于props的另一种写法

<!DOCTYPE html>
<html><head><script src="./js/vue.min.js"></script><meta charset="utf-8"><title></title></head><body><div id="app">  <!-- 如果没有进行传参的话，则会输出默认值 --><cpn :cmovies = 'movies' :cmessage='message'></cpn> <!--第三步绑定父组件的数组并在组件中调用   V-bind：cmovies--></div><template id="cpn"><div><ul><li v-for="item in cmovies" style="list-style: none;">{{item}}</li></ul>{{cmessage}}</div></template><script>// 父传子 : propsconst app = new Vue({el:'#app',data(){return{movies:['1312','321','512521'],message:'啦啦啦'}},// 第一步创建子组件components:{'cpn':{template:'#cpn',props:{cmovies :{type:Array,  default(){return['1','2','3']}//设置默认值},//类型是数组时，默认值必须是一个函数cmessage:{type:String,default:'没有传参' }}   //第二步输入父传子的props,并定义参数,还可以设置类型}}})</script></body>
</html>

14-父子组件通讯，父传子（props）相关推荐

父子组件通信——父传子props
在父组件与子组件中,为了实现父子组件之间的通信,需要使用props,来实现父组件中的内容被子组件所使用.在子组件中使用props来进行与父组件之间的通信. 在使用组件时通过绑定props中定义 ...
父子组件通信-父传子
在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示. 这个时候,并不 ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
vue-cli 组件传值：父传子props
组件怎么使用点这页,本页就直奔主题了啊一.基本传值: 1.在父组件的标签上定义属性,值就是你要传的数据,如下: 2.然后在子组件通过props属性接收传来的值,如下: 父传子的基本传值就完事啦看效 ...
Vue组件传值-父传子（一）(使用prop)
以下内容纯属个人理解,旨在记录和分享. 值传递-父传子实现父组件向子组件的值传递. 在父组件(即使用子组件的组件)中,使用子组件并向其中传递一个静态字符串值(不变的固定的即为静态). 子组件中使用p ...
vue 父传子props
父传子(通过prop实现通信) 1.静态传递子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据. 通过v-bind绑定props的自定义的 ...
vue3.0组件之父传子，子传父,父传孙
父组件<template> <!-- <div>{{name}}</div> {{computedsx}} {{sum}}<button @click= ...
VUE组件通信——父传子、子传父
一.父传子父组件: <ModuleTree ref="moduleTreeRef" :showCheckBox="true" v-on:handleCh ...

14-父子组件通讯，父传子（props）

14-父子组件通讯，父传子（props）

关于props的另一种写法

14-父子组件通讯，父传子（props）相关推荐

最新文章

热门文章