上周准备参加测试大赛，浪费了一周时间没有学习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版权协议，转载请附上原文出处链接和本声明。