• vue学习之组件传值、自定义事件

    1、静态传值

    注意：在template中不要加样式，因为不会起到任何作用他是不会执行的

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
    10.     <style>
    11.  
    12.     style>
    13. head>
    14.  
    15. <body>
    16.     
    17.     <div id="root">
    18.         
    19.         <com-son movies="狐妖小红娘" haha="我是父组件传过来的一句话">com-son>
    20.  
    21.     div>
    22.     
    23.     <template id="myson">
    24.         <div>
    25.             
    26.             <h1>我是子组件h1>
    27.             <h1>{
    28.   {movies}}h1>
    29.             <h1>{
    30.   {haha}}h1>
    31.         div>
    32.     template>
    33.     <script>
    34.         // 创建子组件
    35.         let ComSon = {
    36.             template: "#myson",
    37.             props: ['movies', "haha"],
    38.  
    39.         }
    40.         const vm = new Vue({
    41.             el: '#root',
    42.             data() {
    43.                 return {
    44.  
    45.                 }
    46.             },
    47.             methods: {
    48.             },
    49.             // 注册成一个局部组件
    50.             components: {
    51.                 ComSon
    52.             }
    53.         });
    54.     script>
    55. body>
    56.  
    57. html>

    效果图：

    2、动态传值 

    要保证父组件里面的变量名=props里面的值=templ中的插值{ {}}

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
    10.     <style>
    11.         .fa {
    12.             width: 800px;
    13.             height: 800px;
    14.             background-color: PINK;
    15.             padding: 20px;
    16.         }
    17.  
    18.         .fa button {
    19.             width: 300px;
    20.             height: 100px;
    21.             margin-top: 20px;
    22.         }
    23.  
    24.         .son {
    25.             width: 600px;
    26.             height: 600px;
    27.             background-color: green;
    28.         }
    29.     style>
    30. head>
    31.  
    32. <body>
    33.     <div id="root" class="fa">
    34.         
    35.         
    36.         <com-son :message="msg">com-son>
    37.         <button @click="change">改变msg值button>
    38.     div>
    39.     <template id="myson">
    40.         <div class="son">
    41.             <h1>我是子组件h1>
    42.             <h1>{
    43.   { message }}h1>
    44.  
    45.         div>
    46.     template>
    47.     <script>
    48.         let ComSon = {
    49.
  • 相关阅读:
    【已解决】Failed to find Ceres - Found Eigen dependency
    IDEA上配置mysql
    Linux进程概念
    Docker Build Cache 缓存清理
    使用.NetCore自带的后台作业，出入队简单模拟生产者消费者处理请求响应的数据
    小程序如何设置自动预约快递
    1393. 股票的资本损益
    注册阿里云账号，免费领取云服务器！
    万字长文硬核AQS源码分析
    什么蓝牙耳机适合运动、运动用的蓝牙耳机推荐
  • 原文地址：https://blog.csdn.net/ywforever/article/details/127358589