一.父组件传值给子组件
1.组件挂载数据链路：
屏幕快照 2020-03-17 07.50.16.png
屏幕快照 2020-03-17 07.43.04.png
2.父传子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04.父子组件通信</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// Vue props用法详解
// 组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为：
// props down, events up
// 父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。
//父子组件通信逻辑
//1.new一个Vue对象
//2.分别定义全局组件parent、child
//3.父---->子
//3.1 定义父组件:data(){rerurn{变量："[parentVal]"}}
// 3.2 定义子组件：Vue.component('childName',{Props:["childVal"],template:'{{childVal}}'});
// 3.3 父组件template挂载子组件:'<child :childVal="parentVal"'/>,v-bind:子组件props变量值="父组件变量值"
Vue.component('child',{
template:'<input type="text" :value="childData" v-on:input="" />',
data(){
return{
name:"李小鹏"
}
},
props:["childData"],
methods:{
onchangeValueFun(){
this.$emit('onchangeValueFun',this.name)
},
},
// template:'{{childData}}',
});
Vue.component('parent',{
template:'<child type="text" :childData="parentVal" @input="" />',
data(){
return{
parentVal:"这里是我是李小鹏"
}
},
methods:{
childhandle(childVal){
this.name = childVal
console.log(childVal);
},
printChildVal(){
console.log(childVal);
}
}
});
new Vue({
el:"#app",
data(){
return{
}
},
components:{
},
template:'<div><parent/></div>'
});
// <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
</script>
<style>
</style>
</body>
</html>
网友评论