vue笔记-14（组件-私有组件和组件的数据与方法）
私有组件和组件的数据与方法
- 定义实例内部私有组件
- 只能被某个vm实例使用的组件
- 通过vue对象的components指定定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私有组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 只能在app下使用 -->
<com2></com2>
</div>
<script>
var vm = new Vue({
el :"#app",
components: { //需要vm中定义components
com2:{
template: '<h2>这是私有组件</h2>'
}
}
})
</script>
</body>
</html>
- 组件中的data和methods
- 组件中的data,必须是一个方法，并且返回一个对象
Vue.component('mycom1', {
template: '<h1>这是全局组件</h1>',
data: function(){ //是一个方法
return {} //返回一个对象
}
})
- 组件中的data使用方式，与vue实例中的data使用方式完全一样
- 组件中的方法定义和使用与实例中的一样
- 组件中的data和methods代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件中的data和method</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<template id="tmpl1">
<div>
<!-- 使用组件中的变量 -->
<h3>这是template元素，在外部定义的组件结构，{{ msg }}</h3>
<!-- 使用组件中的方法-->
<a href=":;" @click.prevent="hello()">点我</a>
</div>
</template>
<script>
Vue.component('mycom3',{
template: '#tmpl1',
data: function(){ //组件data，通过方法定义，返回一个对象
return { msg : '我是组件中的data' }
},
methods: { // 组件方法与vue实例中的一样
hello(){
alert('我是组件中的方法')
}
}
})
var vm = new Vue({
el :"#app"
})
</script>
</body>
</html>
本文标题：vue笔记-14（组件-私有组件和组件的数据与方法）
本文链接：https://www.haomeiwen.com/subject/kzbzyktx.html
网友评论