目录
Ref组件通信
Ref绑定dom节点，拿到的就是dom对象
Ref绑定组件，拿到的就是组件对象
Ref是固定的，作用是引用。
创建表单
创建一个表单，获取组件实例，不通过父子通信，直接拿状态和赋值状态。
Ref是固定的，作用是引用。
示例如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" ref="mytext">
<input type="password" ref="mypassword">
<div ref="mydiv">1111111</div>
<button @click="handleAdd">Add</button>
<child></child>
</div>
<script>
let vm = new Vue({
el: "#box",
methods: {
handleAdd() {
console.log(this.$refs.mytext, this.$refs.mypassword, this.$refs.mydiv)
}
}
})
</script>
</body>
</html>绑定组件
因为还没有定义组件，所以控制台会抛出异常。
下面开始设置全局组件，并在绑定事件中打印组件对象。
示例如下：
html
<div id="box">
<input type="text" ref="mytext">
<input type="password" ref="mypassword">
<div ref="mydiv">1111111</div>
<button @click="handleAdd">Add</button>
<child ref="mychild"></child>
</div>
<script>
Vue.component("child", {
template:`
<div>
child
</div>`
})
let vm = new Vue({
el: "#box",
methods: {
handleAdd() {
console.log(this.$refs.mytext, this.$refs.mypassword, this.$refs.mychild)
}
}
})
</script>效果：
定义组件中的状态
在组件内部定义状态，并渲染出来。
示例如下：
javascript
Vue.component("child", {
data() {
return {
myname: "child-222222"
}
},
template:`
<div>
child--{{myname}}
</div>`
})修改组件中的状态
首先拿到组件中定义的状态，然后修改组件中的状态。
示例如下：
javascript
let vm = new Vue({
el: "#box",
methods: {
handleAdd() {
//console.log(this.$refs.mytext, this.$refs.mypassword, this.$refs.mychild)
console.log(this.$refs.mychild.myname)
this.$refs.mychild.myname="parent-111111"
}
}
})效果：
说明
这样的修改方式虽然简单，但是容易造成混乱和出现问题且不易排查和扩展；
容易造成数据流紊乱。
组件注意
属性：父组件传给你的属性，只有父组件可以重新传，但不允许子组件随意修改。
示例如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
{{title}}
<child :mytitle="title"></child>
</div>
<script>
Vue.component("child", {
props:["mytitle"],
template:`
<div>
child-{{mytitle}}
<button @click="handleClickc">click</button>
</div>`,
methods: {
handleClickc() {
this.mytitle="2222222222"
}
}
})
let vm = new Vue({
el:"#box",
data:{
title:"1111111111111"
}
})
</script>
</body>
</html>效果：
页面警告 不要直接去修改组件传递过来的属性；因为修改了，下次再传属性还是会被覆盖。
会造成子属性和父属性不统一，数据流紊乱，会出现不可预期的错误。
属性 --父组件传给你的属性,只有父组件可以重新传,但不允许子组件随意修改.
状态 -- 组件内部的状态,可以随意修改
解决方式
v-once 只修改一次，然后缓存状态。
示例如下：
javascript
Vue.component("child", {
props:["mytitle"],
template:`
<div v-once>
child-{{mytitle}}
<button @click="handleClickc">click</button>
</div>`,
methods: {
handleClickc() {
this.mytitle="2222222222"
}
}
})v-once的作用
渲染普通的HTML元素在Vue中时非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加v-once attribute 以确保这些内容只计算一次然后缓存下来，就像这样：
