您的位置:首页 > Web前端 > Vue.js

vue2.0的三种常用传值方式,并且如何实现?

2018-08-03 17:24 55 查看
版权声明:版权归作者所有 https://blog.csdn.net/qq_40774113/article/details/81391524

三种传值方式:父传子 子传父 非父子

  1. 父传子
  2. 子传父
  3. 非父子

父组件向子组件传值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子向父亲进行传值</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
</body>
<script type="text/javascript">

//      子组件如何向父组件里面进行传值
//      1.首先创建两个组件一个是子组件一个是父组件
//      2.在子组件里面定义数据 使用$emit来进行自定义事件的触发 以及数据的发送
//      3.在父组件里面使用v-on绑定的自定义事件 事件触发 并且执行事件处理函数  通过函数的参数来接受传递过来的数据

Vue.component('father',{
template:`
<ul>
<li v-for="temp in list">{{temp}}</li>
<son @clic="get"></son>
</ul>
`,
data(){
return{list:[]}
},
methods:{
get:function(msg){
this.list.push(msg)
}
}
})
Vue.component('son',{
template:`
<div>
<input  type="text" v-model="inputval" />
<button @click="clik">父亲向子传数据</button>
</div>
`,
data(){
return{
inputval:''
}
},
methods:{
clik(){
this.$emit('clic',this.inputval)
this.inputval=""
}
}
})
var app=new Vue({
el:"#app"
})
</script>
</html>
<!--自定义事件    -->

效果图演示效果

子组件传父组件传值

在子组件里面定义数据 使用$emit来进行自定义事件的触发 以及数据的发送

非父子之间的传值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子组件之间的传值</title>
<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
class Child1 extends React.Component{
constructor(){
super()
}
render(){
return   (
<div><ul><li>child1</li></ul></div>
)
}
componentWillMount(){
window.localStorage.setItem('site','haomahaode')
}
}

class Child2 extends React.Component{

constructor(){
super()
}

render(){
return   (
<div><ul><li>child2</li></ul></div>
)
}
componentWillMount(){
console.log(window.localStorage.getItem('site'))
}
}
ReactDOM.render(
<div><Child1></Child1>
<Child2></Child2></div>
,
document.getElementById("app")
)
</script>
</html>
阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: