组件之间的传值

组件是一个单独功能模块的封装，有属于自己的data和methods，一个组件的 data 选项必须是一个函数

为什么必须是函数：因为只有当data是函数时，不同实例调用同一个组件时才会开辟新空间，互不干扰

  1. data() {
  2.   return {
  3.     count: 0
  4.   }
  5. }

父子组件区分

  1.     <div id="app">
  2.             <cpn> </cpn>
  3.             <cpn1></cpn1>
  4.     </div>
  5. <script>
  6.     //子组件
  7.     const childCpn = Vue.extend({
  8.         template: `
  9.             <div>
  10.                 <h3>我是局部组件，也是子组件</h3>
  11.             </div>
  12.      			` })
  13.     // 父组件
  14.     const parentCpn = Vue.extend({
  15.         template: `
  16.             <div>
  17.                 <h2>我是局部组件，也是父组件</h2>
  18.                 <!-- 使用子组件 -->
  19.                 <cpn1></cpn1>
  20.             </div>
  21.         `,
  22.         components:{
  23.             cpn1: childCpn  //在父组件中注册子组件
  24.         }
  25.     })
  26.     let app = new Vue({
  27.         el:"#app",
  28.         data:{ },
  29.         components:{
  30.             cpn : parentCpn,
  31.             cpn1 : childCpn   //若想在实例中使用子组件也需要在实例中注册
  32.         },
  33.     })
  34. </script>

父传子

Prop 是可以在组件上注册的一些自定义属性，prop值可以是属性也可以是方法，最终都会出现在子组件的实例上供子组件直接调用

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop ，在组件实例中可以直接访问这个值，就像访问 data 中的值一样

  1. <body>
  2.     <!--vue实例需要一个根组件div-->
  3.     <div id="app">
  4.         <ul>
  5.         	<!--使用组件-->
  6.             <tokyo v-for="item in names " :first-name="item"></tokyo>
  7.         </ul>
  8.     </div>
  10. <script type="text/javascript">
  11.         //注册组件
  12.     Vue.component('tokyo',{
  13.         props:['firstName'], //属性
  14.         template:'<li>名字:<h3>{{firstName}}</h3></li>' //模板
  15.     })
  16.     //vue实例
  17.     const app = new Vue({
  18.         el:'#app',
  19.         data:{
  20.             names:['lixiang','wanzi'],
  21.         }
  22.     })
  23. </script>
  24. </body>

命名方式：

组件名：组件名如果是多个单词时，首字母大写或者加横线都可以。MyComponentName 或my-component-name

若使用首字母大写的方式注册，使用时两种方式都可

prop参数：camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名，在子组件内部命名方式不变，绑定父组件属性时要改驼峰命名

为短横线连接

语法

父传子分离写法

  1.  <!--父组件模板-->
  2.     <div id="app">
  3.         <!--使用子组件，v-bind绑定父组件属性给子组件props属性-->
  4.         <cpn v-bind:ctitle="title"  :cname="names" ></cpn>
  5.     </div>
  6.     <!--子组件模板-->
  7.     <template id="cpnTemplate">
  8.     <div>
  9.         <h3>{{ctitle}}</h3>
  10.         <ul>
  11.             <li v-for="item in cname"> <p>{{item}}</p> </li>
  12.         </ul>
  13.     </div>
  14.     </template>
  15. <script>
  17.     //注册子组件
  18.     const cpn ={
  19.         template:"#cpnTemplate",
  20.         props:['cname','ctitle'],
  21.         data(){
  22.             return{}
  23.         },
  24.         methods:{
  25.         }
  26.     }
  27.     //注册父组件
  28.     let app = new Vue({
  29.         el:"#app",
  30.         data:{
  31.             names:['丸子','莉香','三上'],
  32.             title:'hello'
  33.         },
  34.         components:{
  35.             // cpn:cpn
  36.             cpn   //标签名和组件名相同时可简写为cpn
  37.         }
  38.     })
  39. </script>

vue-cli项目组件写法

1、定义组件

  1. <template>
  2.    <div>
  3.         <h3>{{ctitle}}</h3>
  4.         <ul>
  5.             <li v-for="item in cname"> <p>{{item}}</p> </li>
  6.         </ul>
  7.    </div>
  8. </template>
  9. <script>
  10. export default {
  11.      name: "tokyoLoveStory",
  12.      components: {},
  13.      mixins: [],
  14.      props:['cname','ctitle'],
  15.      data(){
  16.         return{}
  17.      },
  18.      methods:{
  19.      }
  20. };
  21. </script>

2、使用组件

  1. <template>
  2.     <!--使用组件时，需变驼峰为短横线-->
  3.     <tokyo-love-story v-bind:ctitle="title"  :cname="names"></tokyo-love-story>
  4. </template>
  6. <script>
  7.     import tokyoLoveStory from 'xxx/tokyoLoveStory'
  8.     export default{
  10.         data(){
  11.              names:['丸子','莉香','三上'],
  12.              title:'hello'
  13.         } ,
  14.         components:{
  15.             tokyoLoveStory
  16.         },
  17.         methods:{
  18.             ...
  19.         },
  20.             ...
  21.         }
  22. </script>

props另一种书写形式：

  1.  props:{
  2.             cname:'',
  3.             ctitle:'',
  4.             //基础类型
  5.             propA:Number,
  6.             //多个可能的类型
  7.             propB:[String,Number],
  8.             //必填的字符串
  9.             propC:{
  10.                 type:Number,
  11.                 required:true
  12.             },
  13.             //带有默认值的字符串
  14.             propD:{
  15.                 type:Number,
  16.                 default:100
  17.             },
  18.             //对象或数组默认值必须是一个函数，返回值是[]或{}
  19.             propE:{
  20.                 type:Object,
  21.                 default: function () {
  22.                     return [];
  23.                 }
  24.             }

子组件向父元素传值

想要子组件的数据传递给父元素，需要自定义触发事件，实现数据的传值。

子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件

  1. <body>
  2.     <!--vue实例需要一个根组件div-->
  3.     <div id="app">
  4.         <ul>
  5.         <!--使用组件，绑定props属性，子组件的触发事件调用父元素方法达到传递参数的目的-->
  6.             <tokyo v-for="item in names "
  7.             	:first-name="item"
  8. 				:parentMethod="parentMethod"
  9. 				@emitevent="emitName">
  10.             </tokyo>
  11.         </ul>
  12.         <h3>选中的姓名是：{{chooseName}}</h3>
  13.     </div>
  15. <script type="text/javascript">
  16.         <!--注册组件-->
  17.     Vue.component('tokyo',{
  18.         props:['firstName'],
  19.         template:'<li>名字:<h3>{{firstName}}</h3> ' +
  20.             ' <button @click="chooseEvent(firstName)">点击传递姓名</button></li>',
  21.         methods:{
  22.             chooseEvent(firstName){
  23.                 console.log(firstName);
  24.                 //触发父元素中emitevent事件，并传递firstName参数给该事件
  25.                 this.$emit('emitevent',firstName);
  26.             }
  27.             parent(){
  28.     			this.parentMethod()	//parentMethod()在子组件实例中，可直接调用
  29. 			}
  30.         }
  32.     })
  33.     const app = new Vue({
  34.         el:'#app',
  35.         data:{
  36.             names:['莉香','丸子','三上','里美'],
  37.             chooseName:''
  38.         },
  39.         methods:{
  40.             //父元素被触发的事件，name为子组件传递过来的参数，赋给父元素的data:{}中的属性
  41.             emitName(name){
  42.                 console.log("被触发事件");
  43.                 this.chooseName = name;
  44.             },
  45.             parentMethod(){
  46.                 console.log("parentMethod")
  47.             }
  48.         }
  49.     })
  50. </script>
  51. </body>

组件通过props属性传值的更多相关文章

  1. 创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  2. React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  3. 组件的props属性和state状态

    props属性: 我使用代码来说明React中props属性: // Profile.jsx import React from 'react' ; export default Class Prof ...

  4. 【Vue】组件watch props属性值

    转载: https://www.cnblogs.com/mqxs/p/8972368.html #HTML <div id="example"> <p> & ...

  5. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  6. 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  7. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  8. vue.js 父子组件间 props 数据同步处理

    常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...

  9. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

随机推荐

  1. 一文让你彻底理解SELECT语句的执行逻辑

    正常情况下SELECT的书写顺序和执行顺序: 书写顺序: SELECT>FROM >WHERE>GROUP BY>HAVE>ORDER BY 执行顺序: FROM > ...

  2. ES增删改查

    了解了一下python对es 7.5的操作,记录下,不难: #!/usr/bin/env python # -*- coding: UTF-8 -*- from settings import Con ...

  3. 使用亚马逊服务器报错：Signature not yet current: 20190726T070253Z is still later than 20190726T070246Z (20190726T065746Z + 15 min.)时间不同步的解决办法

    1．首先获取亚马逊的时间: $ curl http://s3.amazonaws.com -v 2．更改当前服务器时间,使之与亚马逊时间同步 $ date -s 'xxxx-xx-xx xx:xx:x ...

  4. 虚拟机安装配置centos7

    安装 https://blog.csdn.net/babyxue/article/details/80970526 主机环境预设 更换国内yum源 epel源 https://www.cnblogs. ...

  5. WPF进阶技巧和实战03-控件（5-列表、树、网格01）

    列表控件 ItemsControl为列表项控件定义了基本功能,下图是ItemsControl的继承关系: 在继承自ItemsControl类的层次结构中,还显示了项封装器(MenuItem.TreeV ...

  6. Python日常Bug集

    1.TypeError: 'int' object is not iterable: 场景示例: data = 7 for i in data: print(i) # 原因:直接对int数据进行迭代造 ...

  7. vue 移动端项目切换页面，页面置顶

    之前项目是pc端是使用router的方式实现置顶的 //main.js router.afterEach((to, from, next) => { window.scrollTo(0, 0) ...

  8. 十一、Abp vNext 基础篇丨测试

    前言 祝大家国庆快乐,本来想国庆之前更新完的,结果没写完,今天把剩下的代码补了一下总算ok了. 本章节也是我们后端日常开发中最重要的一步就是测试,我们经常听到的单元测试.集成测试.UI测试.系统测试, ...

  9. Mysql双主双从高可用集群的搭建且与MyCat进行整合

    1.概述 老话说的好:瞻前顾后.患得患失只会让我们失败,下定决心,干就完了. 言归正传,之前我们聊了Mysql的一主一从读写分离集群的搭建,虽然一主一从或一主多从集群解决了并发读的问题,但由于主节点只 ...

  10. 【二食堂】Alpha - Scrum Meeting 5

    Scrum Meeting 5 例会时间:4.15 12:30 - 13:00 进度情况 组员 昨日进度 今日任务 李健 1. 主页搭建结束issue2. 与后端协商确定接口的设计3. 查找文本区域功 ...