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

组件中的data和methods

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>

　

?
1
为什么数据用函数的返回值来定义<br><br>
复制代码
<!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 @   三线码工  阅读(379)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示