vue组件 component

转载于：https://www.cnblogs.com/zycbloger/p/6429592.html

1创建组件

1.1.全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>
</body>
</html>
<script>
      //注册
        Vue.component('TestDiv', { //不区分大小写,这里写驼峰法
            template: '<div @click="change">{{msg}}</div>',
            data:()=>{return {msg:'我的组件'}},
            methods:{
                change:()=>{
                    console.log(this); //this指向window
                }
            }
        });

        //创建根实例
        var vm = new Vue({
            el:'#box',
        });

</script>

1.2.局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>
</body>
</html>
<script>
          ///定义组件
        var testTemplate = {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };
        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'TestDiv': testTemplate
            } 
        });
</script>

还有几个其他的写法

1.3.写在script中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>
</body>
</html>
 <script type="text/x-template" id="myComponent">
      <div @click="change">{{msg}}</div>
</script>
<script>
          ///定义组件
        var testTemplate = {
            template: '#myComponent',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };
        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'TestDiv': testTemplate
            } 
        });
</script>

1.4.使用template标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>

   <template id="myComponent">
             <div @click="change">{{msg}}</div>
   </template>
</body>
</html>
<script>
          ///定义组件
        var testTemplate = {
            template: '#myComponent',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };
        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'TestDiv': testTemplate
            } 
        });
</script>

2.使用组件

2.1.使用

<div id="box">
       <test-div></test-div>
       <div is="test-div"></div>
  </div>

2.2.动态使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>
</head>

<body style="padding:30px">
    <div id="box">
        <input type="button" value="1" @click="buttonClick('TestDiv');">
        <input type="button" value="2" @click="buttonClick('TestDiv2')">
        <div :is="myCom"></div>
    </div>
    <template id="myComponent">
        <div @click="change">{{msg}}</div>
    </template>
    <template id="myComponent2">
        <div @click="change">{{msg2}}</div>
    </template>
</body>

</html>
<script>
//定义组件
var testTemplate = {
    template: '#myComponent',
    data(){
        return { msg: '我的局部组件1' }
    },
    methods: {
        change(){
            //todo
            console.log('1111');
        }
    }
};
var testTemplate2 = {
    template: '#myComponent2',
    data(){
        return { msg2: '我的局部组件2' }
    },
    methods: {
        change(){
            //todo
            console.log('2222');
        }
    }
};
//创建根实例
var vm = new Vue({
    el: '#box',
    data(){
        return {
            myCom: 'TestDiv'
        }
    },
    components: {
        'TestDiv': testTemplate,
        'TestDiv2': testTemplate2
    },
    methods: {
        buttonClick(t){
          this.myCom = t;
        }
    }
});
</script>

在用es6语法中，箭头函数中的this始终指向window，我们在vue中使用的是
buttonClick(t){this.myCom = t;}
这种写法，
等同于buttonClick：function(t){this.myCom = t;}
这里this指向 vm