Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":
<div id="app">
<site-name title="Google"></site-name>
<site-name title="Runoob"></site-name>
<site-name title="Taobao"></site-name>
</div>
<script>
const app = Vue.createApp({})
app.component('site-name', {
props: ['title'],
template: `<h4>{{ title }}</h4>`
})
app.mount('#app')
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!--添加连接-->
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<style>
</style>
<body>
<!--show要放在大盒子里-->
<div id="showcommpent">
<!--组件使用-->
<!--<abc age="18"></abc>
<abc age="41"></abc>
<abc age="61"></abc>
<abc age="16"></abc>
<abc age="60"></abc>-->
<abc title="Google" name="123"></abc>
<abc title="Runoob" name="123"></abc>
<abc title="Taobao" name="123"></abc>
</div>
</body>
<script type="text/javascript">
// 每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。
// 当我们挂载应用时,该组件被用作渲染的起点。
//一个应用需要被挂载到一个 DOM 元素中。
// props 用于组件的传值,他的工作就是为了接受外面传过来的数据,是一个配置项,与data、el、ref 是一个级别的。
var data={
data(){
return{
}
}
}
//组件定义
var commpnent={
//接收外界的变量
props: ["title","name","age"],
data(){
return{
msg:"组件内部变量"
}
},
template:
'<h4>{{title + name}}</h4>'
}
//数据渲染
var vueapp=Vue.createApp(data);
//添加组件
vueapp.component("abc",commpnent);
//数据挂载
vueapp.mount("#showcommpent");
</script>
</html>
<!--prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":-->
computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新, computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="vueapp">
<h1>{{a}}</h1>
<h2>{{b}}</h2>
</div>
<script>
//数据处理
var data={
data(){
return{a
show1:"a",
show2:"b"
}
},
computed:{
a:function(){
this.show1="abc"
return this.show1
},
b:function(){
this.show2="efg"
return this.show2
}
}
}
//应用创建
Vue.createApp(data).mount("#vueapp");
</script>
</body>
</html>
实现三级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="vueapp">
<!--<h1>{{show1}}</h1>
<h2>{{show1}}</h2>
<input v-model="show1" type="text" placeholder="show1"/>-->
<select v-model="show1" >
<option>湖南省</option>
<option>湖北省</option>
<option>广东省</option>
</select>
<!--定义selected变量接收数据-->
<select v-model="selected">
<option v-for="c in city" :value="c" selected>{{c}}</option>
</select>
<!--取消绑定-->
<select>
<option v-for="a in areazone">{{a}}</option>
</select>
<!--<input type="button" @click="counter++" value="更新"/>-->
</div>
<script>
//数据处理
var data={
data(){
return{
show1:"aaaa",
show2:"b",
city:[],
areazone:[],
counter:0,
selected:''
}
},
watch:{
//一个新值,一个旧值
show1:function(nv,ov){
this.city=[]
this.areazone=[]
console.log(nv+ov)
if(nv=="湖南省"){
this.city.push("株洲市")
this.city.push("长沙市")
this.city.push("湘潭市")
}
if(nv=="湖北省"){
this.city.push("武汉市")
this.city.push("襄阳市")
this.city.push("宜昌市")
}
if(nv=="广东省"){
this.city.push("广州市")
this.city.push("深圳市")
this.city.push("中山市")
}
},
//selected监听数据的变化
selected:function(nv,ov){
console.log(nv)
console.log(nv[1])
console.log(1)
if(nv=="株洲市"){
this.areazone.push("芦淞区")
this.areazone.push("荷塘区")
this.areazone.push("天元区")
}
if(nv=="长沙市"){
this.areazone.push("A市")
this.areazone.push("B市")
this.areazone.push("C市")
}
if(nv=="武汉市"){
this.areazone.push("D区")
this.areazone.push("E区")
this.areazone.push("F区")
}
console.log(this.areazone);
}
}
}
//应用创建
Vue.createApp(data).mount("#vueapp");
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/f94b1745d7e9da4edda7707e96fdbe61.png)