学习笔记
1.vue 组件之间的传值， 父组件传值到子组件
1.父组件 传值到子组件 ， 父组件要 在父组件的元素能添加 一个 自定义的属性 并且自定义属性 加上 v-bind 进行绑定
2. 子组件 接收 父组件的传值 ， 子组件 通过 props 接收 父组件的值（通过数组的方式接收）
<body>
<!-- //引入vue.js文件 -->
<script type='text/javascript' src='js/vue.js'></script>
<!-- //html元素代码 -->
<div id='app'>
{{msg}}
<hr>
<!-- //把要传的值 通过自定义属性 v-bind绑定属性 -->
<con :i="m"></con>
</div>
<!-- //vue代码 -->
<script type='text/javascript'>
//局部子组件
var con = {
// 子组件 通过 props 接收父组件的传值
props: ['i'],
data() {
return {
con: '子组件'
}
},
template: `<div>{{con}}{{i}}</div>`,
}
//vue实例
var vm = new Vue({
el: '#app',
data: {
msg: '父组件',
m: '-----父' //传值给子组件的代码
},
components: { //添加局部子组件
con // con是简写 = con:con = con:{} 只是把对象放在外面写了
}
});
</script>
</body>
2.子组件 ， 子组件 传值，到父组件
1.子组件 ， 子组件通过点击事件 的函数为 $meit(‘父组件的函数’，‘’传入的值)
2.父组件 ， 父组件 通过 @名称（名称是子组件传过来的的函数名称） = ‘函数’ ， 通过这种方式接收值 ，
<body>
<!-- // 引入vue.js文件 -->
<script type='text/javascript' src='js/vue.js'></script>
<!-- //html元素 -->
<div id='app'>
{{msg}}
<hr>
<son @add="sha"></son>
</div>
<!-- //vue代码 -->
<script type='text/javascript'>
//子组件
var son = {
//template代表模板文件
template: `<div>{{msg}}
<button @click="show">传值给父亲</button>
</div>`,
//代表组的数据
data() {
return {
msg: '子组件', //页面显示的数据
m: '子' //传给 父亲的数据
}
},
methods: {
show() { //传值的函数 通过 返回 $emit方法 使用
return this.$emit('add', this.m);
}
}
}
//vue实例(简称:父组件)
var vm = new Vue({
el: '#app',
data: {
msg: '父组件'
},
components: {
son
},
methods: {
sha(con) {
console.log(con);
}
},
});
</script>
</body>
3.非父子组件传值，要通过一个 中间事件 点击事件 加 $emit() 传值
1.先设置一个 中间事件 列： var bus = new Vue()；
2.传值组件，通过中间事件的 $emit() 传值
3.接值组件，通过mounted(){} 钩子函数，中间事件的 $on() 监听
<body>
<!-- //引入vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<!-- //html结构 -->
<div id='app'>
{{msg}}
<son></son>
<con></con>
</div>
<!-- //vue代码 -->
<script type='text/javascript'>
var v = new Vue(); // 事件中心
var son = {
template: `<div>{{son}}</div>`, // 模板
data() { //放变量的
return {
son: '我是son'
}
},
mounted() { // 所有事件加载完,执行的钩子函数
v.$on('cons', this.callback);
},
methods: { //放函数的
callback(con) {
console.log(con);
}
}
}
var con = {
template: `<div>{{con}}
<button @click="show">传值给son</button>
</div>`,
//通过给button加上点击事件,使用事件中心的 $emit 函数传值给兄弟
data() {
return {
con: '我是con'
}
},
methods: { //放函数的
show() {
v.$emit('cons', this.con)
}
},
}
var vm = new Vue({ //vue实例
el: '#app',
data: {
msg: 'Hello Vue'
},
components: { //创建组件的
son,
con
}
});
</script>
</body>
发表评论