vue_组件中的data和method

Posted 2021-05-25 Hhhr

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue_组件中的data和method相关的知识，希望对你有一定的参考价值。

1、组件中的data

　　组件可以有自己的data数据

　　组件中的data和vue实例中的data不一样，实例中的data是一个对象，而组件中的data是一个方法！！，方法中还要有return一个对象，使用方式与vue实例一样，都是{{ msg }}插值表达式

<!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>组件中的data</title>
</head>
<body>
    <div id="app">
       <mycom></mycom>
    </div>
</body>
    <!--1、导入vue包-->
    <script src="./js/vue.min.js"></script>
    <!--2、创建vue实例（new对象）-->
    <script type="text/javascript">
        Vue.component(\'mycom\',{
            template:\'<h1>这是全局组件-----{{msg}}</h1>\',
            data:function(){
                return {
                    msg:\'这是组件中的data数据\'
                }
            }
        })
        var vm = new Vue({
           el:\'#app\',
           data:{
           },
           methods:{  
           }
        })
    </script>
</html>

2、组件中的method

<!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>组件中的data</title>
</head>
<body>
    <div id="app">
       <mycom></mycom>
       <mycom></mycom>
       <mycom></mycom>
       
    </div>
    <template id="temp">
        <div>
            <input type="button" value="自增" @click="increment"/>
            <p>{{count}}</p>
        </div>
    </template>
</body>
    <!--1、导入vue包-->
    <script src="./js/vue.min.js"></script>
    <!--2、创建vue实例（new对象）-->
    <script type="text/javascript">
        Vue.component(\'mycom\',{
            template:\'#temp\',
            data:function(){
                return {
                    count:0
                }
            },
            methods:{
                increment(){
                    this.count++
                }
            }
        })
        var vm = new Vue({
           el:\'#app\',
           data:{
           },
           methods:{  
           }
        })
    </script>
</html>

以上是关于vue_组件中的data和method的主要内容，如果未能解决你的问题，请参考以下文章

vue小技能：组件的 data 选项methods 选项计算属性侦听器

vue中子组件的methods中获取到props中的值方法