Version: Next

计算属性

在computed中计算一个结果，它会被缓存，用一个变量记录，接下来就可以通过变量调用这个结果，它是被复用的

<template>
<div id="app">
<h1>{ {reverseMsg} }</h1>
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
msg: "hello world"
},
computed:{
reverseMsg:function(){
return this.msg.split('').reverse().join("")
}
}
}
</script>

侦听器

<template>
<div id="app">
<h1 :style="styleObj">点击此处</h1>
<button @click="addClick">点击</button>
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
num: 0,
styleObj: {}
},
methods:{
addClick:function() {
this.num++;
}
},
watch:{ // 监听num的值
num: function(newValue, oldValue) {
console.log('newValue', newValue);
console.log('oldValue', oldValue);
if (newValue > 10) {
cosole.log("大于10");
this.styleObj = {
"background-color": "red"
// backgroundColor: "blue"
}
}
}
}
}
</script>

父组件向子组件传值

  • 父组件
    • import导入子组件
    • 设置components属性
    • 使用子组件标签，调用子组件，在标签中用属性的方式传递值
<template>
<div id="app">
<h1>{ {username} }，你好</h1>
<!-- 使用子组件 传递user值-->
<helloworld user="a"></helloworld>
<helloworld user="b"></helloworld>
<helloworld user="c" :brief="brief"></helloworld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld"
export default {
name: 'App',
data: function(){
username: "bb1"
brief: {
title: "我是标题",
content: "我是内容"
}
},
components:{ // 设置子组件
HelloWorld
}
}
</script>
  • 子组件 HelloWorld
    • props属性接收父组件传递来的值
    • 使用属性值
<template>
<div class="hello">
<div>这是Hello 子组件，{ {user} } 你好</div>
<div>{ {brief.title} }</div>
<div>{ {brief.content} }</div>
</div>
</template>
<script>
export default {
props:["user", "brief"]
}
</script>

子组件向父组件传值——自定义事件

  • 父组件
    • 父元素监听事件@子组件自定义事件名
<template>
<div id="app">
<h1>{ {username} } 欢迎你</h1>
<helloworld @changeParent="editUsername"></helloworld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld"
export default {
name: 'App',
data: function(){
username:"大名"
},
components:{ // 设置子组件
HelloWorld
},
methods:{
editUsername:function(event){ // 接收事件对象, 就是子组件传过来的新值
this.username = event;
}
}
}
</script>
  • 子组件
    • 点击按钮，传递一个新名字到父组件，父组件设置新名字并显示
    • 自定义事件this.$emit("事件名称"),"给父元素的值即事件对象"
<template>
<div>
<button @click="clickFn">点继修改父组件内容</button>
</div>
</template>
<script>
export default {
methods:{
clickFn:function(){
// 触发一个自定义事件，事件名称随便
this.$emit("changeParent", "小名")
}
}
}
</script>

组件插槽

假设页面是一个大组件，大组件又包含两部分

  • 左边的内容——左组件
  • 右边的内容——右组件

希望左组件和右组件的内容，是动态插入进去的

  • 根组件 App.vue
    • 使用子组件标签，其中写模板标签template
    • 在模板template标签中写html代码
    • v-slot:名字设置插槽名，不需要引号
<template>
<div id="app">
<layout> <!-- 大组件 -->
<template v-slot:left>
<div class="left" >左</div>
</template>
<template v-slot:right>
<div class="right">右</div>
</template>
</layout>
</div>
</template>
<script>
import layout form './components/layout'
export default {
name: 'App',
components: {
layout
}
}
</script>
  • 大组件——布局组件 layout.vue
    • 里面有插槽slot，根组件中layout标签中的html代码会被插入到插槽位置
    • 通过name属性与父组件v-slot属性匹配
<template>
<div>
<div>这是头部</div>
<div>
<h1>这是左边</h1>
<slot name=“left”></slot>
</div>
<div>
<h1>这是右边</h1>
<slot name="right"></slot>
</div>
<div>这是尾部</div>
</layout>
</div>
</template>
<script>
import layout form './components/layout'
export default {
name: 'App',
components: {
layout
}
}
</script>