Vue组件数据

Vue组件数据教程

Vue 组件 可以有自己的 data 数据。Vue 组件的 data 和 Vue 实例的 data 有点不一样，实例中的 data 可以为一个对象，但是组件的 data 必须是一个方法。

Vue 组件中的 data 除了必须为一个方法外，这个方法内部，还必须返回一个对象。

Vue组件数据详解

语法

<script type="text/javascript">
	Vue.component("my-component", {
		template:"",
        data: function(){
            return {
            }
        }
	});
	var vm = new Vue({
        el : '#app',
        data:{
        }
    });
</script>

说明

Vue 组件的 data 必须是一个方法，且方法中必须返回一个对象。

案例

Vue组件数据

<!DOCTYPE html>
<html>
<head>
	<title>Vue组件数据</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<my-component></my-component>
        <p>嗨客网（www.haicoder.net）</p>
    </div>
</body>
<script type="text/javascript">
	Vue.component("my-component", {
		template:"<h1>组件数据 --- {{msg}}</h1>",
        data: function(){
            return {
                msg: '嗨客网'
            }
        }
	});
	var vm = new Vue({
        el : '#app',
        data:{
        }
    });
</script>
</html>

浏览器运行效果，如下图所示：

10 vue component data.png

我们使用 Vue.component 定义了一个名为 my-component 的全局组件，并且在全局组件的 data 方法中返回一个对象。接下来可以在组件的 template 里引用该数据。

Vue组件数据总结

Vue 组件中的 data 除了必须为一个方法外，这个方法内部，还必须返回一个对象。