vue.js父子组件通信动态绑定
2024-09-05 15:19:10
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='app'>
<!--这里的作用是将父组件渲染到页面上-->
<father></father>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script type="text/x-template" id="father">
<div>
<!--这里实现一个双向绑定-->
<!--parentMsg变量必须在data中声明，不然会报错，我就错在这个坑-->
<input v-model="parentMsg">
<br>
<child :my-message="parentMsg"></child>
</div>
</script>
<script type="text/x-template" id="child">
<div> {{'父组件传递的数据为：'+ myMessage }} </div>
</script>
<script>
Vue.component('father',{
// 这里我直接把template写到前面script标签中了，写在这里一大坨，难看
template:'#father',
data:function(){
return {
parentMsg:''
}
}
});
//在 Vue 中，父子组件的关系可以总结为 props down, events up。
// 父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息
Vue.component('child', {
props: ['myMessage'],//这里的props选项是用来实现父子组件的通信的，传递下来的消息字组件用花括号接住
template: '#child'
});
new Vue({
el:'#app'
})
</script>
</html>最新文章
- svn 合并分支
- Android 添加cookie
- cocos2d-x 2.x版本接入bugly的总结
- unable to connect to the virtual device Genymotion 神器启动问题
- FZU 2151 OOXX Game
- Android防微信首页左右滑动切换
- 【Cardboard】 体验 - Google Cardboard DIY及完成后简单体验
- ubuntu terminal 介绍及相关命令
- linux下安装oracle11g 64位最简客户端(转)
- C#字符串转INT
- TurnipBit之DIY无线遥控智能小车
- Spring 对Controller异常的统一处理
- 2.2Bind建立配置文件和实体的映射「深入浅出ASP.NET Core系列」
- java web(二): servlet的简单使用和介绍
- docker文件复制到centos/linux/ubantun环境下
- 使用InstallAnywhere7.1制作Java exe程序安装包
- MD5摘要算法实现
- httpSession的正确理解
- MySQL从删库到跑路（二）——MySQL字符集与乱码解析
- Dubbo实践（十三）Export