TZ_16_Vue父子组件之间的通信
2024-10-08 00:23:37
1.父向子传递props，该如何传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--父在 app 中拿到数据发送给儿子 -->
<lcoal v-bind:title="msg"></lcoal>
<lcoal1 v-bind:items="lession"></lcoal1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//局部组件
const lcoal = {
template: "<h1>{{title}}</h1>",
//拿到父传递过来的数据 名字必须相同 放到组件中进行渲染
props: ['title']
};
const lcoal1= {
template: "<ul><li v-for='item in items'>{{item}}</li></ul>",
//拿到父传递过来的数据 名字必须相同 放到组件中进行渲染
//props: ['items']
props:{
items:{
//传递的数据必须是数组类型的
type:Array,
//如果没有传递数据过来默认使用的数据
default:['java']
}
}
};
const app = new Vue({
el: "#app",
data: {
msg: "大家好！",
lession:['java','php','python']
},
components: {
lcoal,
lcoal1
}
})
</script>
</body>
</html>
2.单机子的增加方法，不能直接修改父属性里面的值，需要父自己修改属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<h2>num: {{num}}</h2>
<counter v-bind:count="num":inc="increment" v-on:dec="decrement"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("counter", {
template:`
<div>
<button @click="plus">加</button>
<button @click="reduce">减</button>
</div>`,
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
</script> </body>
</html>
最新文章
- docker笔记
- iOS - 沙盒中，如何判断存在文件、目录
- ISO 14229 简介 转载
- [ACM_水题] Yet Another Story of Rock-paper-scissors [超水 剪刀石头布]
- C/C++ 动态存储分配
- 将word中的“空格” 转换为换行符
- jquery的一些用法
- BZOJ 1013: [JSOI2008]球形空间产生器sphere 高斯消元
- Flash 无法输入中文的修正方法
- window.event对象详细介绍
- Checking Network Configuration requirements Failed
- Juuluu 旗下企业站点管理系统3.0.1公布！
- 关于在ios7之后改变状态栏颜色
- Spring MVC 项目搭建 -4- spring security-添加自定义登录页面
- for(int a:i)在java 编程中的使用
- java 通过HttpURLConnection与servlet通信
- 【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建
- max_delay/min_delay和input_delay/output_delay
- sql中的limit关键字
- Progressive web app理念及发展前景