美文网首页程序员
vue视频教程系列第十五节-组件基础知识(2)

vue视频教程系列第十五节-组件基础知识(2)

作者: 独绽2018 | 来源:发表于2018-09-27 10:50 被阅读4次

今天主要讲一下组件中父组件如何向子组件传递数据的

 我们上一节课讲了如何创建组件,如何使用组件。组件是可以被复用的,可以被复用在各种组件中,而其所在的父组件的环境是不尽相同的,即代表着子组件所承接的数据属性等也是不相同的,所以会提出传值的问题。父组件为子组件传递不同的内容,子组件呈现不同的内容,执行不同的操作,而达到各种兼容复用。

     父组件传值给子组件,需要两步骤:

1. 在父组件的Dom里的子组件标签里设置一个动态的自定义属性,将数据存储在里面,当然,首先需要在data里设置一下这个数据

         <v-header :title="title"></v-header>

         前一个title是自定义的属性,后一个title是数据里定义的数据

2. 在子组件里接收这个属性里的数据,接收用props

         props: ['title']

第一步的完整代码--这部分是在父组件里完成:

html部分:

<div id="root">

     <v-header :title="title"></v-header>

  </div>

js部分:

import Header from './components/Header.vue'

  export default {

    components: {

      'v-header': Header

    },

    data() {

      return {

         title: "首页"

      }

    }

  }

第二步的完整代码--在子组件里完成:

html部分:

<div class="header">

      {{ title }}

</div>

js部分:

props: ['title'], 

  data () {

 return {

 }

  }

接下来我们就可以看到页面效果啦!

PS:

props是一个数组,也可以是对象,如果是对象的话,可以栓查传递过来的数据是否是我们需要的类型,以及给数据设置一个初始值,其可以改成:

props: {

    title: {

        type: String,

        default: 'header'

   }

父组件不仅可以传递这种简单的字符串,数值,还可以传递方法。我们可以做下改动,在methods里定义一个方法,同样在Dom里设置它的自定义属性,代码如下:

html部分:

<div id="root">

     <v-header :title="title" :go="go"></v-header> //这里第二个go不要加(),加了就执行了

  </div>

js部分:

components: {

      'v-header': Header

    },

    data() {

      return {

         title: "首页"

      }

    },

    methods: {

      go () {

        alert("this is home")

      }

    }

子组件里--html部分:

<div class="header">

      {{ title }}

      <button class="button" @click="go">点我</button>

  </div>

子组件里--js部分:

props: ['title', 'go'],     

点击一下按钮,是否能显示出“this is home”呢?

是不是觉得父母辈是很强大的,所有的东西都可以毫无保留地传授给他们的子女?

欢迎加入我们的前端学习交流群一起成长:duzhan2018

相关文章

网友评论

    本文标题:vue视频教程系列第十五节-组件基础知识(2)

    本文链接:https://www.haomeiwen.com/subject/mmasoftx.html