重温vue父传子
第一步:新建一个vue3的demo
vue create vuedemo
第二步:运行demo
npm run serve
此时得到的demo目录如下:
App.vue是父组件
HelloWorld.vue是子组件
第三步:子组件
html部分
这里我们展示两个字段
<div>
<span>{{ msg }}</span>
<span>{{ toVal }}</span>
</div>
js部分
<scrpit>
export defaule {
props:{
msg:String
}
}
</script>
这里要注意的是props在传递多个值时,并不是以数组的形式去书写代码
而是
<scrpit>
export defaule {
props: {
msg: {
type: String,
default: () => "",
},
toVal: {
type: String,
default: () => "这是父传子的默认值",
},
},
}
</script>
以对象的形式
第四步:父组件
html部分
接收两个字段
<HelloWorld msg="Welcome to Your Vue.js App" :toVal="name" />
js部分
<script>
//先引用子组件
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
//挂载子组件
components: {
HelloWorld,
},
data() {
return {
name: "我是张三",
};
},
};
</script>
子组件上传递两个值一个是静态写死的msg,一个是动态从父组件中获取的值name。
总结:父传子,顾名思义值是由父组件传给子组件的,最后显示在父组件上是因为这里子组件作用在父组件上,子组件也可以被别的页面引用,但是值还是由父组件传过去的。