学习vue第十六节，子组件也有变量和方法

组件中的data和methods

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <mycom1></mycom1>
  </div>

  <script>
    // 1. 组件可以有自己的 data 数据
    // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
    // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
    // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
    Vue.component('mycom1', {
      template: '<h1>这是全局组件 --- {{msg}}</h1>',
      data: function () {
        return {
          msg: '这是组件的中data定义的数据'
        }
      }
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

</html>

　

为什么数据用函数的返回值来定义

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        
        <div id="app">
            
            <mycom1></mycom1>
            <mycom></mycom>
            <mycom1></mycom1>
        </div>
        
        <!-- 在控制范围外使用template元素 -->
        <template id="temp">
            <div>
                <h3>通过id在定义{{msg}}组件的HTML模板</h3>
            </div>
        </template>
        <template id="temp1">
            <div>
                <button type="button" @click="count">count</button>
                <h3>{{num}}</h3>
            </div>
        </template>
        <script type="text/javascript">
            // 主件可以有data数据，但是data必须是一个方法，方法内部还得返回一个对象
                Vue.component("mycom",{
                    template:'#temp',
                    data:function(){
                        return {
                            msg:'----我是全局主件的data值-------'
                        }
                    }                
                })
                // 属性写在方法好处在于，成为一个局部变量主件就算重复使用，也互不影响
                Vue.component("mycom1",{
                    template:'#temp1',
                    data:function(){
                        return {
                            num:1
                        }
                    },
                    methods:{
                        count(){
                            this.num++
                        }
                        
                    }
                })
            var vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                }
                
            })
            
            
        </script>
    </body>
</html>

 

posted @ 2020-06-08 19:21  三线码工  阅读(379)  评论(0)  编辑  收藏  举报