父组件/子组件

为了学习父子组件的传值，先了解父子组件怎么定义的。

父组件：拥有data、methods等属性（如实例化的Vue对象），并且组件中有components有子组件，那么相对于components中的组件，本身即是父组件
子组件: 在父组件中components属性下定义的组件称为子组件，子组件也可以有属于自己的data、methods等属性，也可以继续使用component接着创建子组件。

子组件使用变量/绑定方法

之前在父组件中学习了在data中创建变量属性，在页面中使用{{属性名}}即可实现将变量值渲染在页面中，现在子组件也要实现创建一个变量然后在组件中引用渲染。

子组件也可以创建属于自己的方法，并且使用v-on绑定方法。

在子组件中创建data方法(注意这里的data是方法,而父组件的data是属性)

子组件也可以创建methods属性用来存放组件使用的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
      <itembox></itembox>
      <itembox></itembox>
  </div>
</body>
</html>
<script>
  var itembox = {  //子组件
              template:`
              <div>
                  <h1 @click="clickH1">冒险岛</h1>
                  <h2>{{des}}</h2> 
              </div>
              `,
              data(){ //子组件用于存放数值的地方，并且要求data是方法。
                  return {  // 必须要使用return才能将属于返回，区别于Vue对象的data键值用法
                       des:"PYTHON"
                  }
              },
              methods:{  // 子组件所绑定的方法
                  clickH1(){
                      console.log(123)
                  }
              }
          }

  new Vue({  // 父组件
      el:"#app",
      data:{
  
      },
      methods:{
  
      },
      components:{
          itembox  //子组件
      }
  })
</script>

37-48行声明的Vue对象拥有data、methods等属性，这个Vue对象可以理解成一个组件，并且有子组件。
- 第46行新建了itembox的子组件，所以Vue这个对象就可以理解成父组件
25-34行为子组件的data方法和methods属性
- data方法中返回需要调用的变量需要使用return
- methods的用法和Vue对象的基本一致
第21行绑定子组件创建的方法
第22行调用子组件在data中声明的变量

测试页面:

点击”冒险岛“其绑定的子组件方法触发，在控制台打印
子组件的data中的des键值成功传递给页面

父组件向子组件的参数传值

现在要传递不同的参数给子组件，两个子组件的des分别为java和go，所以需要在页面中的子组件标签中去填写传递的值，相当于从父组件中传递了参数至子组件。

props接收传递参数

子组件首先使用props属性来接收传递的参数名(接收的参数名存入数组中),页面调用props中的参数方法和调用data中的属性一样，都在{{}}中添加对应的名称即可。

调用props中的值

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <itembox mydes="java"></itembox>  
        <itembox mydes="go"></itembox>
    </div>
</body>
</html>
<script>
    var itembox = {  //子组件
                template:`
                <div style="background:#efefef; margin:10px">
                    <h1 @click="clickH1">冒险岛</h1>
                    <h2>{{mydes}}</h2> 
                </div>
                `,
                props:["mydes"],
                data(){ //子组件用于存放数值的地方，并且要求data是方法。
                    return {  // 必须要使用return才能将属于返回，区别于Vue对象的data键值用法
                         des:"PYTHON"
                    }
                },
                methods:{  // 子组件所绑定的方法
                    clickH1(){
                        console.log(123)
                    }
                }
            }

    new Vue({  // 父组件
        el:"#app",
        data:{
    
        },
        methods:{
    
        },
        components:{
            itembox
        }
    })
</script>