ref属性放在普通标签上
<input type="text" v-model="name" ref="myinput">
?? ?通过 this.$refs['myinput'] 拿到的是 原生dom对象
? ? 操作dom对象：改值，换属性等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../src/assets/js/vue.js"></script>
<script src="../src/assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" ref="aa">
<button @click="handleClick">点我</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
methods:{
handleClick(){
var i = this.$refs['aa']
i.value='美女'
}
}
})
</script>
</html>2 ref属性放在 组件上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../src/assets/js/vue.js"></script>
<script src="../src/assets/js/axios.js"></script>
</head>
<body>
<div id="app">
<input type="text" ref="aa">
<button @click="handleClick">点我</button>
<child ref="bb"></child>
</div>
</body>
<script>
Vue.component('child',{
template:`
<div style="background-color: bisque">
<img height="300px" :src="url">
<button @click="handleClick('这是子组件的弹窗')">点我</button>
</div>
`,
data(){
return {
url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7b9e81e9-4cfd-4b21-a784-212b13a15711%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707567147&t=de940d68c5ec9bd349b0c3fae0c48038',
}
},
methods:{
handleClick(name) {
alert(name)
}
}
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
handleClick(){
var i = this.$refs['aa']
i.value='美女'
var l =this.$refs['bb']
l.url='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe6fd6a63-a387-41fe-be6a-6a30c4d1d80a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707567147&t=e1e6d3382abbd62e6c80e9df47ef4154'
l.handleClick('lyz')
}
}
})
</script>
</html>#一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差
# 然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在的组件标签中添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../src/assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>插槽使用</h1>
<div style="background-color: aquamarine">
<Home>
<div>
<img src="./img/1.png" alt="" width="200px" height="300px">
</div>
</Home>
</div>
<hr>
<div style="background-color: pink">
<Home>
<a href="">点我看美女</a>
</Home>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
who: 'Home',
},
components: {
Home: {
template: `
<div>
<h3>我是首页</h3>
<slot></slot>
<h3>结束了</h3>
</div>
`
},
}
})
</script>
</html>