标签：向子 vue run Sub1 title 组件 home

简介

vue中组件与组件的关系存在两类：父子组件与非父子组件。 如下图所示，三个组件中就包含了父子组件与非父子组件两种情况，这里组件之间的交互主要由值传递和事件触发调用两种方式，这里先分享下父组件向子组件值传递。

方式

父组件可以向子组件传递的值有三种类型

1. 属性变量或者纯文本
2. 函数名
3. 父组件自身实例（this）

例子

假设有两个组件App.vue和Sub1.vue，其中App.vue为父组件，Sub1.vue为子组件。

父组件App.vue

<template>
     <!--父组件传递titile，run，home给子组件sub1-->
     <!--其中title为属性，run为方法，this为父组件实例的指针-->
     <sub1 :title="title" :run="run" :home="this"  ref="deleteConfirm"/>
</template>
<script>
//导入子组件
import Sub1 from './Sub1.vue' 
export default {
      name: 'app',
      data() {
             return {
           　　　　title : 'test' 
      　　   }
       },methods {
             run() {
                    console.log('parent')
             }
       }, components: {
      　　　　Sub1 //挂载子组件Sub1
       }
}
</script>

子组件Sub1.vue

<template>
     <!--子组件接收父组件传过来的title-->
     <module :title="title" : ref="deleteConfirm"/>
     <!--这里点击button可以调用父组件的run方法-->
     <button :click="run()"></button>
     <!--runParent内部通过父组件的this指针调用父组件的属性和方法-->
     <button :click="runParent()"></button>
</template>
<script>
　　export default {
          name: "Sub1",
          data() {
                return {
                  title: ''
             }
          },
          //1.第一种方法，用数组的方式接收父组件的传值：title,run,home
          props: ['title','run','home'],
         ,methods {
              runParent() {
                   //可以通过父组件实例this.home直接调用父组件中的方法。
                   console.log(this.home.title);
    　　　　　　　　　this.home.run();
              }
         }
    }
</script>

prop接收参数

prop有两种接收父组件传递的参数语法。 第一种就是上面的props: ['title','run','home'],这种数组方式 第二种：我们也可以在传递值的时候对prop进行校验。 常见的类型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

上面的Props可以改成如下

   props: {
        title: {  //接收父组件传递过来的title
             type: String,
             default() {
                  //如果父组件没有传递title变量，则使用default()获取一个默认值
                  return this.$t('commons.title')
         　　 }
        },
        run: { //接收父组件传递过来的run方法，
             type: Function,
             default: function () {
                  console.log('hello')
             }
        },
        home: { //接收父组件本身
             type: Object,
        }
  },

 

博主：测试生财

座右铭：专注测试与自动化，致力提高研发效能；通过测试精进完成原始积累，通过读书理财奔向财务自由。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

 

标签：向子,vue,run,Sub1,title,组件,home
来源： https://www.cnblogs.com/qa-freeroad/p/13869667.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。