标签：Vue cpn cpnC Component vue 组件 data
vue组件
一、基本使用
<div id="app">
<!--3、使用组件-->
<my-cpn></my-cpn>
</div>
<script>
//1.创建组件构造器
const cpnC= Vue.extend({
template:`
<div>
<h2>我是cpnC的标题</h2>
</div>
`
})
//2、注册组件 Vue.component('组件的标签名',组件构造器)
Vue.component('cpn',cpnC);
//3、使用组件
const app=new Vue({
el:'#app'
})
</script>
1.1.全局组件和局部组件
全局组件
Vue.component('cpn',cpnC);
/***********等价于**********/
Vue.component('cpn',{
template:`
<div>
<h2>我是cpnC的标题</h2>
</div>
`
});
局部组件
const app=new Vue({
el:'#app'
components:{
// cpn使用组件时的组件名，cpnC组件构造器
cpn:cpnC
}
})
/***********等价于**********/
const app=new Vue({
el:'#app'
components:{
// cpn使用组件时的组件名，cpnC组件构造器
cpn:{
template:`
<div>
<h2>我是cpnC的标题</h2>
</div>
`
}
}
})
1.2.模板的分类写法
- script标签，注意：类型必须是text/x-template
<script type="text/x-template" id="cpn">
<div>
<h2>我是cpn的标题</h2>
</div>
</script>
- template标签
<template id="cpn">
<!--子组件很多标签，必须有个根节点-->
<div>
<h2>我是cpn的标题</h2>
</div>
</template>
- 使用
Vue.component('cpn',{
template:'#cpn'
});
1.3.手脚架中的写法
- 创建组件，.vue文件
<template>
<div>
<h1>我是ChildA组件</h1>
</div>
</template>
<script>
export default {
name: "ChildA",
};
</script>
<style scoped>
</style>
- 父组件导入并使用
<template>
<div id="app">
<!--3、template中引入组件-->
<child-a></child-a>
</div>
</template>
<script>
//1、import导入
import ChildA from "./components/ChildA.vue";
//2、components 中加上组件名
export default {
name: "App",
components: {
ChildA,
}
};
</script>
二、数据的存放
-
子组件不能直接访问父组件
- 组件是一个单独功能模块的封装：这个模块有属于自己的html模板，也有自己的数据data。
- 即使能直接访问父组件，所有数据放父组件中，父组件就会变得很臃肿
-
子组件有自己的data，必须是个函数，这个函数返回一个对象，对象内部保存这数据。
-
为什么data必须是一个函数
-
一个组件可以被多次引用。
-
Object是引用数据类型，如果data是个对象，每个组件的data 指向同一个地址，一个数据改变了其他也改变了。
-
data是一个函数时，每次调用都重新return一个新的对象，没有相互影响。
/*********是个对象***************/ var Component= function() { } Component.prototype.data = {//是同一个对象,内存地址一样 a: 1, b: 2 } // 使用组件 var component1 = new Component() var component2 = new Component() component1.data.b = 3 component2.data.b //3 /*********是个函数***************/ var Component= function() { } Component.prototype.data = function() { return { // 不是同一个对象，内存地址不一样 a: 1, b: 2 } } // 使用组件 var component1 = new Component() var component2 = new Component() component1.data.b = 3 component2.data.b // 2 -
三、组件通信
四、slot的使用
标签：Vue,cpn,cpnC,Component,vue,组件,data 来源： https://www.cnblogs.com/jiajia-hjj/p/15375683.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。