ref属性（组件间通信），动态组件，插槽

N10N11

已于 2024-01-12 15:48:28 修改

阅读量416

点赞数 8

分类专栏： vue基础文章标签：前端 javascript java

于 2024-01-11 21:33:50 首次发布

本文链接：https://blog.csdn.net/flclyz/article/details/135537757

版权

vue基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ref属性（组件间通信）

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>

动态组件

使用v-if控制组件显示与否

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
</head>
<body>
  <div id="d1">
    <h1>点击切换组件</h1>
    <button @click="who='home'">首页</button>
    <button @click="who='goods'">商品</button>
    <button @click="who='order'">订单</button>
    <home v-if="who=='home'"></home>
    <goods v-else-if="who=='goods'"></goods>
    <Order v-else></Order>
  </div>
</body>
<script>
  var vm = new Vue({
    el:'#d1',
    data:{
      who:'home'
    },
    components:{
      Home:{
        template:`
                <div>
                <h3>我是首页</h3>
                </div>
        `},
        Goods:{
        template:`
                <div>
                <h3>我是商品</h3>
                </div>
        `},
        Order:{
        template:`
                <div>
                <h3>我是订单</h3>
                </div>
        `},
      }
  })
</script>
</html>

通过动态组件控制组件显示谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>点击切换组件</h1>
    <button @click="who='home'">首页</button>
    <button @click="who='goods'">商品</button>
    <button @click="who='order'">订单</button>
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            who: 'home'
        },
        components: {
            Home: {
                template: `
                <div>
                <h3>我是首页</h3>
                </div>
        `,
            },
            Goods: {
                template: `
                <div>
                <h3>我是商品</h3>
                </div>
        `,
            },
            Order: {
                template: `
                  <div>
                    <h3>我是订单</h3>
                    <input type="text" v-model="search">
                  </div>
                `,
                data() {
                    return {
                        search: ''
                    }
                }
            },
        }
    })
</script>
</html>