vue复习大法之组件化思想(四)
初次体验vue代码Vue是一个渐进式的框架,渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验,或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生太系统,例如Core+Vue-router+Vuex(全家桶)<div id="app">{{message}}</div><script src="./js/vue.js"&g
·
初次体验组件化思想
注册组件的步骤
注册步骤解析
上代码
<div id="app">
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
/* 调用Vue.extend()创建的是一个组件构建起
通常在创建组件构造器时,传入template代表我们自定义组件的模板
该模板就是在使用到组件的地方,要显示HTML代码
Vue的文档几乎看不到,之后是使用语法糖 */
/*
Vue.component() 是将刚才的组件构造器注册为一个组件,并且给它起一个组件的名字
需要传递两个参数:注册组件的标签名称;组件构造器
*/
/*
组件必须挂载到实例上面
*/
const cpn = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
</div>
`
});
Vue.component('my-cpn', cpn);
let app = new Vue({
el: "#app",
data: {
message: "Hello Word"
},
methods: {}
})
</script>
全局组件和局部组件
父组件和子组件
注册组件-语法糖
模板组件的分离写法
组件数据的存放
<script>
function obj() {
return {
name: "jack"
}
}
let o1 = obj();
let o2 = obj();
let o3 = obj();
o1.name = "Roise";
console.log(o1)
console.log(o2)
console.log(o3)
</script>
具体使用小案例
<div id="app">
<temp></temp>
<temp></temp>
</div>
<template id="temp1">
<div>
<p>{{title}}</p>
<p>{{cout}}</p>
<button @click="increat">+</button>
<button @click="upcreat">-</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('temp', {
template: "#temp1",
data() {
return {
title: "我是标题",
cout: 0
}
}, methods: {
increat() {
this.cout++;
}, upcreat() {
this.cout--;
}
},
})
let app = new Vue({
el: "#app",
})
</script>
父子组件的通信
正常情况子组件不能引用父组件或者Vue实例的数据,但是在实际开发中,往往一些数据缺失需要从上层传递到下层,比如我们从服务器请求到了很多的数据,其中一部分数据展示总体界面的吗,一些数据展示小组件中的数据,并不会重新发送请求,而是让大组件将数据传给小组件
props用法
Vue实例和子组件的通信和父组件和子组件的通信过程是一样的
<div id="app">
<cpn :cmessage="message" :cmovies="movies"></cpn>
</div>
<template id="temp">
<div>
<p>{{cmessage}}</p>
<p>{{cmovies}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template: "#temp",
// props: ['cmessage', 'cmovies'],
// props:{
// cmessage:String,
// cmovies:Array
// },
props: {
cmessage: {
type: String,
default: '默认值',
required: true
},
cmovies: {
type: Array,
// default:[],// vue2.5.17 以下不会报错,否则会报错
// 类型是对象或者数据时,默认值必须是一个函数
default(){
return[]
}
}
},
data() {
return {}
}
}
let app = new Vue({
el: "#app",
data: {
message: "Hello Word",
movies: ['姜子牙', '哪吒', '大闹天宫', '虞姬传']
},
components: {
cpn
},
methods: {}
})
</script>
数据验证
组件中使用驼峰命名
<div id="app">
<!-- 目前版本来说 是不支持驼峰命名 -->
<temp :cmessage="message" :cmovies="movies" :cinfor="infor"></temp>
<!-- cInfor c-infor -->
<temp :cmessage="message" :cmovies="movies" :chile-arr="chileArr"></temp>
</div>
<template id="temp1">
<div>
<p>{{cmessage}}</p>
<p>{{cmovies}}</p>
<p>{{cinfor}}</p>
<p>{{chileArr}}</p>
</div>
</template>
// 部分代码
props: {
chileArr: {
type: String,
default: "123"
}
},
子级向父级传值
代码分析
<div id="app">
<temp @btnclick="btn"></temp>
</div>
<template id="temp">
<div>
<button v-for="item in categories" @click="btnClikc(item)">
{{item.name}}
</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const temp = {
template: "#temp",
props: {
},
data() {
return {
categories: [
{ id: "1", name: "热门推荐" },
{ id: "2", name: "今日热点" },
{ id: "3", name: "现时抢购" },
{ id: "4", name: "国际品牌" }
]
}
},
methods: {
btnClikc(item) {
// 发射事件
this.$emit("btnclick",item.name)
}
},
}
let app = new Vue({
el: "#app",
data: {
message: "Hello Word"
},
components: {
temp
},
methods: {
// 处理发射事件函数接收收据
btn(item) {
console.log(item);
}
}
})
</script>
组件化访问-父子相传数据
父访问子
<div id="app">
<temp :c-message="message"></temp>
<temp :c-message="message"></temp>
<temp :c-message="message"></temp>
<temp :c-message="message" ref="aaa"></temp>
<button @click="btnClick">按钮</button>
</div>
<template id="temp">
<div>
<p>{{cMessage}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const temp = {
template: "#temp",
props: {
cMessage: {
type: String,
default: "默认字符串",
required: true
}
},
data() {
return {
name: "张三"
}
},
methods: {
showMessage() {
console.log("showMessage");
}
},
}
let app = new Vue({
el: "#app",
data: {
message: "Hello Word"
},
components: {
temp
},
methods: {
btnClick() {
console.log(this.$refs.aaa.name);
this.$children[0].showMessage();
}
}
})
</script>
子访问父
<div id="app">
<temp :c-message="message"></temp>
</div>
<template id="temp">
<div>
<p>我是temp组件</p>
<cpn></cpn>
</div>
</template>
<template id="cpn">
<div>
<p>我是cpn组件</p>
<button @click="btnClick">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: "Hello Word"
},
components: {
temp: {
template: "#temp",
data() {
return {
name: "我是temp"
}
},
components: {
cpn: {
template: "#cpn",
methods: {
btnClick() {
console.log(this.$parent.name);
console.log(this.$parent);
console.log(this.$root.message)
}
},
}
}
}
},
methods: {}
})
</script>
父子组件访问
插槽 slot
组件的插槽: 组件的插槽也是为了让我们封装的组件更加有扩展性。 让使用者可以决定组件内部的一些内容到底展示什么。
<div id="app">
<temp :c-message="message">
<p>我是插槽</p>
</temp>
<temp :c-message="message">
</temp>
<temp :c-message="message">
</temp>
<temp :c-message="message">
<p>我是插槽</p>
<button>按钮</button>
</temp>
</div>
<template id="temp">
<div>
<p>{{cMessage}}</p>
<slot><p>我是默认值插槽</p></slot>
</div>
</template>
slot基本使用
具名插槽
<div id="app">
<temp>
<p slot="left">我是左边返回</p>
</temp>
<temp>
<p slot="center">我是中间标题</p>
</temp>
</div>
<template id="temp">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
编辑作用域
父组件模板的所有东西都会在父级作用域内编译;子级组件模板的所有东西都会在子级作用域内编译
<div id="app">
<temp v-show="isShow"></temp>
</div>
<template id="temp">
<div>
<p v-show="isShow">显示文字</p>
<p>{{cMessage}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const temp = {
template: "#temp",
data() {
return {
isShow: false
}
}
}
let app = new Vue({
el: "#app",
data: {
message: "Hello Word",
isShow: true
},
components: {
temp
},
methods: {}
})
</script>
作用域插槽的使用
<div id="app">
<cpm>
<template slot-scope="slot">
<span>{{slot.data}}</span>
</template>
</cpm>
</div>
<template id="cpm">
<div>
<slot :data="smessage">
<ul>
<li v-for="(item,index) in smessage" :key="index">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="./js/node_modules/vue/dist/vue.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
lsit: [{
name: "张三"
},
{
name: "李四"
},
{
name: "王五"
},
{
name: "赵六"
},
]
}
},
components: {
cpm: {
template:"#cpm",
data() {
return {
smessage: ['123', '456', 'sadfsadf', 'dgfhgh']
}
},
}
}
})
</script>
更多推荐
已为社区贡献10条内容
所有评论(0)