vue组件入门

1、组件的定义

• 声明名称为myapp的组件
• 定义数据通道：通过prop向组件传递value1参数
• 定义submit方法向父组件传递数据值
• 定义插槽

var myapp = {
        props: ["value1"],
        template:
          `<div>
           <a>子组件的值:</a>
           <input type="text" v-model="value1"/> 
           <p><input type="button" @click=submit() value="提交"/></p> 
           <slot :childSlotValue="value1"> </slot>
           </div>
          `,
        methods: {
          submit() {
            console.log("这是组件中的log:"+this.value1);
            this.$emit("transmitdata",this.value1);
          }
        }
      };

2、组件的注册

• new 一个Vue实例
• 在实例中注册名称为myapp的组件
• 定义returnData方法供组件回调，进行数据传递。

new Vue({
        el: "#app",
        components: {
          myapp
        },
        data: {
          fatherValue: "这是我的第一个组件"
        },
        methods:{
          returnData(data){
              console.log("这是主页面中的log:"+data);
              this.fatherValue=data;
          }
        }
      });

3、组件的使用

• 在页面中添加myapp组件
• 父级作用域上定义事件transmitdata，实现组件向父级页面通信并返回数值
• 组件中使用插槽

<div id="app">
      <a>主页面的值:</a>
      <input type="text" v-model="fatherValue" />
      <myapp v-bind:value1="fatherValue" @transmitdata="returnData">
          <template slot-scope="list">
                  <span>{{list.childSlotValue}}</span>
         </template>
      </myapp>
    </div>

demo源码：​​vue component demo source code​​