上周准备参加测试大赛,浪费了一周时间没有学习VUE,罪过…
今天开始要双管齐下,还要看论文,三管齐抓啦〜
(1)父子组件之间的传值
在教程里,它认为,Vue的实例中的就是父组件,子组件在父组件中定义的组分
这个子组件是没法直接用父组件中的数据的
需要用V-绑定属性传值
属性需要在对象里用的道具定义这个属性
这个过程是属性传递,过程如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<com1 v-bind:parentmsg="msg"></com1><!-- 第四步,绑定一个属性parentmsg,这个是子组件自己的属性,赋值为父组件的data-->
</div>
<template id="tmpl"> <!-- 第三步,挂钩的实例对象模板实际内容,里面的数据是子组件的属性值属性 -->
<div>
<h1>这是子元素 --- {{ parentmsg }}</h1> <!-- 第五步,想要怎么展示这个子组件的属性值data,在模板里写 -->
</div>
</template>
<script>
var com1 = { //第二步延伸:设置子组件的实例对象为id=tmpl
template: '#tmpl',
props: ['parentmsg'], //第四步延伸,这个子组件的属性需要在实例对象里面定义好才可以在html中使用到绑定。
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({ //第一步,创建一个vue实例,里面的data是父组件的data
el: '#app',
data: {
msg: '这是父组件中的数据,爸爸有100块钱,myson, 你要不',
},
methods: {
},
components: { //第二步,定义一个子组件
com1
}
});
</script>
</body>
</html>
子组件传给父组件的过程是:
子组件有自己的数据,通过按按钮触发绑定的一个方法传值给父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<com1 v-bind:parentmsg="msg" @func="getMsgFormSon"></com1> <!-- 第三步:绑定一个方法,子组件触发一个函数,这个函数就是父组件vue里定义的方法
-->
</div>
<template id="tmpl">
<div>
<h1>这是子元素 --- {{ parentmsg }}</h1>
<input type="button" value="向父组件传递消息" @click="sendMsg"> <!-- 第四步:按下按钮触发子组件的方法sendMsg -->
</div>
</template>
<script>
var com1 = {
template: '#tmpl',
data() { //第一步:同时,子组件自己也有自己的data,用一个return包围,可以传递给父元素
return {
msg: '做一个孝顺的孩子,给爸爸一些钱去挥霍吧!'
}
},
props: ['parentmsg'],
methods: {
sendMsg() { //第四步延伸:用emit表示触发一个方法func,也就是com1里面的方法,传参this.msg也就是子组件的msg给父组件
this.$emit('func', this.msg) //
}
}
}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的数据,爸爸有100块钱,my son, 你要不',
msgFormSon: '' //第二步:再定一个data对象
},
methods: {
getMsgFormSon(data) { //第二步延伸:拿到传递过来的msg,定义一个方法
this.msgFormSon = data
console.log(this.msgFormSon)
}
},
components: {
com1
}
});
</script>
</body>
</html>
(2)watch监听改变
watch可以监听元素的改变触发函数,元素当然也可以用keyup触发
但是如果是路由虚拟元素,就必须用watch,这里监听了route.path,观察他是否发生改变
一旦改变触发函数,函数带两个参数,一个旧值一个新值
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 容器 -->
<router-view></router-view>
</div>
<script>
// 2. 创建子组件
var login = {
template: '<h3>这是登录子组件,这个组件是 奔波霸 开发的。</h3>'
}
var register = {
template: '<h3>这是注册子组件,这个组件是 霸波奔 开发的。</h3>'
}
// 3. 创建一个路由对象
var router = new VueRouter({
routes: [ // 路由规则数组
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive' // 和激活相关的类
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router,
watch: {
// this.$route.path
'$route.path': function (newVal, oldVal) {
// console.log(newVal + ' --- ' + oldVal)
if (newVal === '/login') {
console.log('欢迎进入登录页面')
} else if (newVal === '/register') {
console.log('欢迎进入注册页面')
}
}
}
});
</script>
</body>
(3)computed属性
computed内部放入元素,不用写在data里
这个元素是由其他元素组合而成的,若其他元素有一个被改变,则computed规定的元素会重新组合更新
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="middlename"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
middlename: ''
},
methods: {},
computed: { // 在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】, 计算属性的,本质,就是 一个方法,只不过,我们在使用 这些计算属性的时候,是把 它们的 名称,直接当作 属性来使用的;并不会把 计算属性,当作方法去调用;
// 注意1: 计算属性,在引用的时候,一定不要加 () 去调用,直接把它 当作 普通 属性去使用就好了;
// 注意2: 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会 立即重新计算 这个 计算属性的值
// 注意3: 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,所以来的任何数据,都没有发生过变化,则,不会重新对 计算属性求值;
'fullname': function () {
console.log('ok')
return this.firstname + '-' + this.middlename + '-' + this.lastname
}
}
});
</script>
</body>
(4)
版权声明:本文为u013045370原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。