前言
组件化开发是vue中的重要内容,vue框架写项目的时候,组件化结构很明晰,这样不仅提高了办公的效率,同时使代码有了更好的移植性,本文整理了组件基础内容中的三种传值问题,希望对阅读者有所启发
提示:以下是本篇文章正文内容,下面案例可供参考
一、三种传值场景
1.父组件向子组件传值
父组件给子组件传值
1.父组件调用子组件的时候 绑定动态属性(这里绑定的是value)
2.在子组件里面通过 props接收父组件传过来的数据
3.直接在子组件里面使用
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<father></father>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.component('father',{
data:function(){
return{
fathervalue:123
}
},
template:`<div>
<div>父组件的值{
{
fathervalue}}</div>
<son :value="fathervalue"></son>
</div>`
})//定义父组件, :value中绑定的值为父组件的值,将通过:value传递给子组件
Vue.component('son',{
props:[