vue_組件中的data和method

本文轉載自查看原文 2021-05-25 08:47 1016

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 14Vue組件的data和method的方法 Vue 組件中data為什么是函數 vue組件中data為什么必須是個函數 vue組件中的data為什么是函數？ Vue.js 組件中data的使用 vue組件中data和props的區別 vue_父子組件之間的數據傳遞 vue_子組件綁定原生事件 vue 子組件如何修改父組件data中的值？？？？？？？？？？？？？？？？？？ Vue 組件 data為什么是函數